How to implement JavaScript binding listening function for event handle

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. This article mainly introduces the method of JavaScript to bind listening functions to event handlers, and analyzes the common techniques and methods of JavaScript event binding in the form of examples. Notes, friends in need can refer to it, I hope it can help everyone.

1. Traditional binding method:

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

a. Traditional binding method, very simple and stable, within the function body This 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 time processing capture and There are two stages of bubbling; the same event handler of the same element can register multiple listening functions; moreover, this inside the listening function points to the current element.

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

3. IE event handle 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 repeatedly.

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 occurred, not the current node, and in There is no equivalent DOM currentTarget property in IE's event object.

4. Cross-browser method one:

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;
};

The above code is from Dean EdwardsaddEvent/removeEven

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 );
}

In addition, the event stream can be divided into bubbling events and capture events, HTML Most elements contain their own default behavior, such as hyperlinks, submit buttons, etc. We can prevent its default behavior by adding "return false" to the binding event. If you are interested in Pinyin, please refer to the relevant introduction on the detailed introduction of event bubbling and event capture in JS on this website.

Related recommendations:

Detailed examples of audio and video listener applications in html5

vue monitors the scroll event of an element to ceiling Or display a fixed position for detailed explanation

Detailed explanation of javascript event model, object, monitoring, and delivery code examples

The above is the detailed content of How to implement JavaScript binding listening function for event handle. For more information, please follow other related articles on the PHP Chinese website!