Detailed explanation of JavaScript implementation of binding listening function examples for event handles

This article mainly introduces the method of binding listening functions to event handlers in JavaScript. It analyzes the common techniques and precautions of JavaScript event binding in the form of examples. Friends in need can refer to it. I hope it can help everyone.

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 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:

vue monitors scrolling events and a detailed explanation of ceiling or fixed position display of an element

How to implement ReactJS monitoring Page scroll event

Detailed explanation of event listening and event publishing usage examples in Node.js

The above is the detailed content of Detailed explanation of JavaScript implementation of binding listening function examples for event handles. For more information, please follow other related articles on the PHP Chinese website!