js event mechanism Detailed

Learn event mechanism must first understand events and event flow.

1. Event Handler

Event handlers are divided into three categories:

HTML event handlers
DOM0-level event handler
DOM2-level event handler

1. HTML event handlers

<button onclick="alert(hello world!)"></hello>

feature is:

JS coupled to HTML and height; when the need to modify the name of the function, need to modify two places

2. DOM0-level event handler

DOM0 level event handler by means of a DOM node is added on [event] event by JS.

var btn=document.getElementById("#btn");
btn.onclick=function(){
    alert(hello world!)
}

feature is:

Each DOM can add only one event;

3. DOM2-level event handler

Its characteristics:

You can add multiple nodes to the DOM event handling

IE10- corresponding method is: the attachEvent / detachEvent , is used as follows:

function handleEvent (Event) {
    // TODO 
} 
dom.attachEvent (eventName, handleEvent)   // attachEvent only be triggered in the bubbling stage and stage target 
dom.detachEvent (eventName, handleEvent)

Acquisition parameters can be obtained directly at the listener function in the event of its object, its properties are:

1. type - get the event type 
2. srcElement - get audience 
3. cancelBubble = true to prevent the event from bubbling 
4. returnValue = false to prevent the default behavior of the event

IE11 + browsers and other corresponding methods is the addEventListener / the removeEventListener . Its usage is as follows:

function the handleEvent (Event) {
   // the TODO 
} 
dom.addEventListener (eventName, the handleEvent, to false ); //   i.e. {useCapture: false}, may trigger bubbling phase / target phase; default 
dom.removeEventListener (eventName, handleEvent, false );

The corresponding event object properties are:

1. type - get the event type 
2. target - get events target 
3. stopPropagation () - stop the event propagation 
4. preventDefault () - prevent the event's default behavior

2. Event stream

Event stream is the sequence of events in the page to accept that the sequence of events spread. Event propagation consists of three phases:

Capturing phase - from the outermost -> target DOM
Target stage
Bubbling phase - target DOM-> outermost

When the bubbling and capture exist, eventing order: Capture -> Target -> bubbling

Example:

<!-- 单击son-->
<!DOCTYPE html>
<html lang="en">
<body>
  <div id="father" style="width: 400px;height: 200px;background-color: bisque">
    <div id="son" style="width: 200px; height: 100px;background-color: brown"></div>
  </div>
  <script>
    document.body.addEventListener('click', function(event) {
      the console.log ( ' body-Bubble ' ) 
    }, to false );
     // Note that the parent can not be directly used as id, representatives window.parent 
    father.addEventListener ( ' the Click ' , function (Event) { 
      the console.log ( ' father- Bubble ' ); 
    }, to false ); 
    document.body.addEventListener ( ' the Click ' , function (Event) { 
      the console.log ( ' body-Capture ' ) 
    }, to true ); 
    father.addEventListener ( ' the Click', function(event) {
      console.log('father-capture');
    }, true);
    son.addEventListener('click', function(event) {
      console.log('son');
    }, false); 
  </script>
</body>
</html>

operation result

body-capture
father-capture
son
father-bubble
body-bubble

3. event delegation

Event delegates, also called event broker.

1. The principle of the event delegate

Generally refers to the use event bubbling, or a group of a DOM event handler delegate to the parent element or more outer element.

2. The significance of the event delegate

Can specify only one event handler, you can manage a number of different types of event handlers.

If you need to add the event to the list of items, when an excessive number of list items, there will be frequent operation situation of the DOM; and function are reference types, heap memory needed to store, take up a lot of space. Commissioned by the event, the event can be bound to the parent element ul, so only need to do this once DOM, without causing frequent redraws. It will not take up a lot of space.

Example:

<! - achieved by directly binding an event delegate and also on the li the same effect by specific properties of the event -> <! DOCTYPE HTML > 
< HTML lang = "EN" > 
< body > 
  < ul the above mentioned id = 'Father' > 
    < Li ID = "A" > A </ Li > 
    < Li ID = "B" > B </ Li > 
    < Li ID = "C" > C </ Li > 
    < Li ID = "d">D</Li > 
  </ UL > 
  < Script > 
  father.addEventListener ( ' the Click ' , function (E) { 
    const Event = E || the window.event; 
    const target = event.target || event.srcElement;
     // The event attribute determination DOM node is currently located, different node processing program 
    Switch (target.id) {
       Case  " a " : 
        the console.log ( ' a ' );
         BREAK ;
       Case  " B":
        console.log('b');
        break;
      case "c":
        console.log("c");
        break;
      case "d":
        console.log("d");
        break;
      default:
        console.log('default');
    }
  })
  </script>
</body>
</html>