A small summary of THE DOM event flow

Without further ado, let’s get straight to my notes

DOM Event level

There are four DOM levels: DOM0, DOM1, DOM2, and DOM3.

DOM events are divided into three levels: DOM0-level event processing, Dom2-level event processing, and Dom3-level event processing.

So why is there no DOM1 level event handling? Because there is no definition in DOM1 level. Don’t ask me how I know, because that’s all I know

DOM0 level events

element.onclick = function(){}

Without further ado, let’s start with the code

 <button id="btn">Click on the</button>
  
  <script>
    const btn = document.getElementById('btn')

    btn.onclick = () = > {
      alert('hello')}// btn.onclick = null to unbind
  </script>
Copy the code

In the HTML event handler, the onclick event is bound to the button tag, so if you change the function name, you need to change it in at least two places.

The above code is DOM0 level event processing, by manipulating DOM to complete the event binding.

So what are DOM0 level processing events? It assigns a function to the event handler property, as in the above example, js assigns a function to the onclick handler event by getting the ID button.

The disadvantage of dom0-level events is that they cannot bind more than one of the same events at the same time. If multiple events are bound, the latest bound event will override the previous one. I won’t show you here, but you can try it yourself.

Grade DOM2 events

element.addEventListener(‘click’,function(){},false)

<button id="btn">Click on the</button>

  <script>
    const btn = document.getElementById('btn')

    btn.addEventListener('click'.() = > {
      alert('hello')},false)
    btn.addEventListener('click'.() = > {
      alert('I'm not ok')},false)
    
    // btn.removeEventListener('click', () => {}, false); Unbundling event
  </script>
Copy the code

As the code says, dom2-level events solve the problem of not being able to bind multiple same processing events simultaneously at DOM0 level. As the code shows, after clicking the button, the code will execute hello first, then I’m not good.

The dom2-level event handler contains three parameters: binding event handler property name (no need to add on), handler function, whether event capture.

Versions later than IE8 do not support addEventListener, require attachEvent and do not require a third parameter because IE8 versions later only support bubbled events.

Level the DOM3 event

element.addEventListener(‘keyup’,function(){},false)

DOM3 events add some event types, such as scrolling and keyboard events, on the basis of DOM2. Dom3-level events also allow users to customize some events.

The DOM event flow

Event handler

DOM2 also provides two operations for handling and removing event handlers: addEventListener() and removeEventListener(), which provide global access to any code block.

The details have already been covered in the previous section, so there is no more to explain.

DOM event model

Event bubbling: Steps from the most concrete elements (such as buttons) to less concrete elements (such as documents), simply from inside out.

Event delegate: is the use of event bubbling mechanism, triggered by their own events, let the parent element instead of execution; This greatly reduces memory footprint and increases efficiency. For example, card clicks.

<div id="parent">
    <button id="son">The event bubbling</button>
  </div>

  <script>
    const parent = document.getElementById('parent')
    const son = document.getElementById('son')

    parent.addEventListener('click'.() = > {
      console.log('I am the father')},false)

    son.addEventListener('click'.() = > {
      console.log('I am a child')},false)
  </script>
  <! Result: I am the child, I am the father
Copy the code

Event capture: Instead of the order in which events bubble, capture starts at window. It’s an outside in.

<div id="parent">
    <button id="son">Event capture</button>
  </div>

  <script>
    const parent = document.getElementById('parent')
    const son = document.getElementById('son')

    parent.addEventListener('click'.() = > {
      console.log('I am the father')},true)

    son.addEventListener('click'.() = > {
      console.log('I am a child')},true)
  </script>
  <! Result: I am the father, I am the child
Copy the code

Take a look at the picture and it might be clearer

This figure is from the network

The DOM event flow

Both event models are supported: event capture and event bubbling, which are executed in the following order:

• Event capture phase
• In the target stage
• Event bubbling phase

This assumes that the capture phase does not involve event targets. However, some browsers refer to event targets during the capture phase

Take a look at chestnuts

<div id="parent">I am a father<div id="son">I was a child</div>
  </div>

  <script>
    const parent = document.getElementById('parent')
    const son = document.getElementById('son')

    // Father capture
    parent.addEventListener('click'.() = > {
      console.log('Father capture')},true)
    // Father bubbles
    parent.addEventListener('click'.() = > {
      console.log('Father bubbles')},false)
    // The child catches
    son.addEventListener('click'.() = > {
      console.log('Child capture')},true)
    // The child bubbles
    son.addEventListener('click'.() = > {
      console.log('Baby bubbles')},false)
  </script>
Copy the code

What do you think is going to happen?

The answer should be first father capture, followed by the target program, child capture and child bubble, followed by father bubble

So if I change the order of the code in the target program, the result is still the same

<div id="parent">I am a father<div id="son">I was a child</div>
  </div>

  <script>
    const parent = document.getElementById('parent')
    const son = document.getElementById('son')
    // Change the order of the father as well
    // Father bubbles
    parent.addEventListener('click'.() = > {
      console.log('Father bubbles')},false)
    // Father capture
    parent.addEventListener('click'.() = > {
      console.log('Father capture')},true)
    
    // Change the order here
    // The child bubbles
    son.addEventListener('click'.() = > {
      console.log('Baby bubbles')},false)
    // The child catches
    son.addEventListener('click'.() = > {
      console.log('Child capture')},true)
  </script>
Copy the code

Take a look at my screenshot

Obviously, the answer is not the same as before, but the event capture first and then the event bubble. How to change the code order is different, and the strange thing is that the father code order change does not affect the result (as long as clicking “I am a child” also changes “I am a father”), while the child code change does.

The magic here is that the child code is the target code, and the target code does not follow a predetermined order in the event stream. Instead, it is more fair and follows a first-come-first-served rule, whether it is event capture or event bubbling, and whoever appears first in the code executes first.

Note: this article is my notes in the learning process, if there are mistakes or inaccuracies, please give me more advice ~