Flow of events

The DOM event standard describes three stages of event propagation:

  1. The Capture Phase — The ancestor of The event object from The targetWindowPropagation to the parent node of the target.
  2. The Target Phase — events propagate to The target node.
  3. The Bubble phase — The event object propagates upward from The target’s parent untilWindow.

The same element can be processed in either the capture phase or the bubble phase;

The DOM0 level (onclick) basically controls the bubble phase, whereas the DOM2 level (addEventListener) controls the capture phase;

Control event propagation and default behavior

  • The DOM0 event handler can passreturn falseTo prevent event bubbling (but not to prevent event capture). 
    // Inline HTML event handling<a href="http://www.baidu.com" onclick="return false;"></a> <! -- Can prevent event default behavior 👍; Unable to prevent event propagation 👎-->
Copy the code
       <a href="http://www.baidu.com" onclick="handleClick()">baidu</a>
   
   <script>
   document.getElementsByTagName("a") [0].onclick(event){
     event.preventDefault() //🚫 blocks default events
     event.stopPropagation() //🚫 prevents event propagation
     return false // //🚫 prevents default events but does not prevent event propagation
   }
   </script>
Copy the code
  • DOM2 event processing
    • throughtarget.addEventListener(type, listener, useCapture);Bind event listeners to DOM nodes
      • type: A string representing the type of listening event.
      • listener: Listener function.
      • useCapture : Boolean value indicating whether the listener function is executed during the capture phase. The default value isfalse
    • listenerThe function accepts an event object argument by defaulteventCan be called inside a functionevent.stopPropagation()To stop event propagation (capturing the bubbling phase can be done at 🤞).
       <a href="http://www.baidu.com">baidu</a>
   
   <script>
    document.getElementsByTagName('a') [0].addEventListener('click'.(event) = > {
     event.preventDefault() //🚫 blocks default events
     event.stopPropagation() //🚫 prevents event capture
   },true)
   </script>
Copy the code

Why do you need event flows

Question: Why not fire handlers on event objects directly?

Consider: for example, in a click event, if the click event is bound to the parent node, and the child node is larger than the parent node, then the click event handler on the parent node will never be triggered. Thus, we need a flow of events. (This is just one reason I’m guessing, of course)

Event delegation

Because of the DOM event propagation mechanism, the event will eventually propagate to the Document (without manually stopping event propagation), we can bind the Document to a click event, in which we just need to get the event target (event.target, which represents the node that triggered the event); It is possible to do different processing according to different event targets (so that you do not need to bind events to elements one by one, saving the amount of code and memory 👍).

      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li data-flag="special">4</li>
        <li>5</li>
        <li>6</li>
      </ul>
      
    <script>
      document.getElementsByTagName('ul') [0].addEventListener('click'.(e) = >{
        if(e.target.dataset.flag==='special'){
          alert('I am special! ') 
          //do something...}})</script>
Copy the code

Reference: event-flow