Detailed explanation of JavaScript binding listening function examples for event handles_javascript skills

The example in this article describes how JavaScript binds listening functions to event handlers. Share it with everyone for your reference, the details are as follows:

Binding event listening functions to Dom elements in JavaScript is a very common thing, but there are also many bugs here. Various browsers provide many methods for event binding, but only 3 are reliable:

1. Traditional binding method:

elem.onclick = function( event ){
  alert(event.type + 'this.innerHTML');
};

a. The traditional binding method is very simple and stable. This in the function body also points to the node that is processing the event (such as the node currently running the event handler).

b. An event handler of an element can only register one function. If registered repeatedly, overwriting will occur; moreover, the traditional binding method will only run in event bubbling.

2. W3C standard binding method:

var elem = document.getElementById('ID');
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 1); 
  } , 
  false //冒泡阶段执行
);
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 2); 
  } ,
  false
);

a. This binding method supports both capture and bubbling stages of time processing; multiple listening functions can be registered for the same event handler of the same element; and, inside the listening function, this points to the current element.

b. However, the popular IE browser does not support this registration method.

3. IE event handler registration method:

var elem = document.getElementById('a');
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1); 
  } 
);
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2); 
  }
);

a. This binding method can register the same event handle multiple times.

b. IE's event model does not support event capture; this in the listening function body does not point to the current element, and window.event.srcElement points to the node where the event occurs, not the current node, and in IE's event There is no equivalent DOM currentTarget property in the object.

4. Cross-browser method 1:

function addEvent(element, type, handler) {
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;
  if (!element.events) element.events = {};
  var handlers = element.events[type];
  if (!handlers) {
  handlers = element.events[type] = {};
  if (element["on" + type]) {
   handlers[0] = element["on" + type];
  }
  }
  handlers[handler.$$guid] = handler;
  element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
  if (element.events && element.events[type]) {
  delete element.events[type][handler.$$guid];
  }
};
function handleEvent(event) {
  var returnValue = true;
  event = event || fixEvent(window.event);
  var handlers = this.events[event.type];
  for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
  }
  return returnValue;
};
function fixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
};

5. Cross-browser method two:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
  obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
  } else
  obj.removeEventListener( type, fn, false );
}

I hope this article will be helpful to everyone in JavaScript programming.