Explain the basics of event flow and event handlers in JavaScript

Event Flow: In two, IE is the event bubbling flow, when the event began from the most specific elements received, gradually propagated to the less specific node (element-> Document). In contrast, Netscape's event capture stream.

DOM2-level events specify that the event flow consists of three phases: the event capture phase, the target phase, and the event bubbling phase.

In most cases, you add an event handler to the bubbling phase of the event flow. A eventutil 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 () {...}
}

Below we look at in detail:

DOM0-level event handlers
the traditional way to specify event handlers through JavaScript is to assign a function to an event handler property.
Each element has its own event handler properties, which are usually all lowercase, such as onclick. Setting the value of this property to a function allows you to specify an event handler.

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

Advantages: 1. Simple 2. Has the advantage of Cross-browser
Disadvantage: The event handler is not specified before the code is run, so the code is behind the button in the page, and it is possible that the user experience gets worse after a few clicks and no response.

DOM2-level event handlers
Two methods are defined to handle actions that specify and delete event handlers: AddEventListener () and RemoveEventListener (). Three parameters, 1. The event name to be processed. 2. Function as event handler 3. A Boolean value. This last Boolean value is true, which means that the event handler is invoked during the capture phase, and False indicates that the event handler is invoked during the bubbling phase.

Add multiple event handlers
var btn = document.getElementById (' mybtn ');
Btn.addeventlistener (' click ', Function () {
  alert (this);//For DOM element btn
},false);
Btn.addeventlistener (' click ', Function () {
  alert (' Hello world ');
},false)

; Remove event handler
btn.removeeventlistener (' click ', Function () {
  //anonymous functions cannot be removed, remove failed
},false);
  Overwrite
  var handler = function () {
  alert (this.id);
  Btn.addeventlistener (' click ', Handler,false);
  Remove the event handler again
  btn.removeeventlistener (' click ', Handler,false);//Remove success

The two event handlers are triggered in the order in which they were added. In most cases, you add event handlers to the bubbling phase of the event stream, which maximizes compatibility with various versions of browsers.

Benefits: One element can add multiple event handlers
Disadvantages: IE8 and the following browsers do not support DOM2-level event handlers. (including IE8)

IE Event handlers
Two methods are defined, similar to the above: Attachevent (), DetachEvent (). The two methods receive the same two parameters: the event handler name and the event handler function. Because IE8 and earlier browsers only support event bubbling, event handlers added through DetachEvent () are added to the bubbling phase.

var btn = document.getElementById (' mybtn ');
Btn.attachevent (' onclick ', function () {
  alert (this);//Window
});
Btn.attachevent (' onclick ', Funciton () {
  alert ("HELLO, World");
});

Click the button and the sequence of triggers for these two event handlers is just the opposite. is not triggered in the order of adding an event handler, just the opposite.

Benefits: One element can add multiple event handlers
Disadvantage: only IE is supported.

Cross-browser event handlers

eg

var eventutil = {
  addhandler:function (ele, type, handler) {
    if (ele.addeventlistener) {
      Ele.addeventlis Tener (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.removeeven Tlistener (type, handler, false);
    else if (ele.detachevent) {
      ele.detachevent (' on ' + type, handler);
    } else {
      ele[' on ' + type] = null;< c17/>}}}