Detailed explanation of event streams and event handlers in JavaScript

Event flow: There are two types. IE is the event bubble flow. When the event starts, it is received from the most specific element and propagates upward step by step to less specific nodes (Element -> Document). In contrast, Netscape's event capture stream.

DOM2 level events stipulate that the event flow includes three stages: the event capture stage, the target stage and the event bubble stage.

Most of the time it is the bubble phase of adding an event handler to the event stream. An EventUtil's chestnut:

 var EventUtil = { addHandler: function(element, type, handler){ if(element.addEventListener){ element.addEventListener(type, handler, false); }else if(element.attachEvent){ element.attachEvent('on' + type, handler); // IE8 }else{ element['on' + type] = handler; } }, removeHandler: function(){...}}

Let's take a look at it in detail below:

DOM0 level event handler

The traditional way of specifying event handlers through Javascript is to assign a function to an event handler attribute.

Each element has its own event handler attributes, which are usually all lowercase, such as onclick. Setting the value of this property to a function can specify the event handler.

 var btn = document.getElementById('myBtn');// Add event handler btn.onclick = function () { alert( this );// is a DOM element btn};// Remove event handler btn.onclick = null;

Advantages: 1. Simple 2. It has the advantages of cross-browser

Disadvantages: Event handlers are not specified before the code is run, so these codes are located behind the button in the page, so it is possible that no response is received after a period of time, and the user experience becomes worse.

DOM2 level event handler

Two methods are defined to handle operations that specify and delete event handlers: addEventListener() and removeEventListener(). Three parameters, 1. The name of the event to be processed. 2. Function as event handler 3. A boolean value. The last boolean value is true, which means that the event handler is called in the capture stage, and false means that the event handler is called in the bubble stage.

 // Add multiple event handlers var btn = document.getElementById('myBtn');btn.addEventListener('click',function (){ alert( this );// is DOM element btn},false );btn.addEventListener('click',function () { alert('Hello World');},false);// Remove event handler btn.removeEventListener('click',function () { // Anonymous function cannot be removed, removal failed},false); // Rewrite var handler = function () { alert(this.id); }; btn.addEventListener('click',handler,false); // Remove the event handler again btn.removeEventListener('click',handler,false);// Remove successfully

These two event handlers are fired in the order in which they are added. In most cases, event handlers are added to the bubbling stage of the event stream, which can be maximum compatibility with various versions of the browser.

Advantages: One element can add multiple event handlers

Disadvantages: IE8 and below browsers do not support DOM2 level event handlers. (Including IE8)

IE event handler

Two methods are defined, similar to the above: attachEvent(), detachEvent(). These two methods receive the same two parameters: the event handler name and the event handler function. Since IE8 and earlier versions only support event bubbles, event handlers added through detachEvent() will be added to the bubble phase.

 var btn = document.getElementById('myBtn');btn.attachEvent('onclick', function(){ alert( this );// window});btn.attachEvent('onclick', funciton(){ alert("HELLO, WORLD");});

Click the button, the triggering order of these two event handlers is exactly the opposite of the above. Not triggered in the order in which event handlers are added, just the opposite.

Advantages: One element can add multiple event handlers

Disadvantages: Only support IE.

Cross-browser event handler

eg:

 var EventUtil = { addHandler : function ( ele, type, handler ) { if ( ele.addEventListener ) { ele.addEventListener( type, handler, false ); } else if ( ele.attachEvent ) { ele.attachEvent( 'on' + type, handler ); } else { ele['on' + type] = handler } }, removeHandler: function ( ele, type, handler ) { if ( ele.removeEventListener ) { ele.removeEventListener( type, handler, false ); } else if ( ele.detachEvent ) { ele.detachEvent( 'on' + type, handler ); } else { ele[ 'on' + type ] = null; } }}