This is the 31st day of my participation in the August Text Challenge.More challenges in August

preface

After learning the JS DOM events for a few days, let’s learn the JS DOM event flow.

The DOM event flow

We bundle click event to a target element, and then we click on the element, the browser will not respond to this element of the event, because you click on the element, equivalent to click the ancestor element of the element at the same time, so he is not just a response to a target element, if so, the event will be successively in the order.

Historically Netscape was a fan of event capture, Microsoft was a fan of event bubbling. In the end, the W3C unified the two ideas.

The event is caught, the target element fires, and the event bubbles.

Event capture

Event capture means that before the target element triggers an event, the target element’s ancestor triggers the event capture and then responds to the target element.

The event bubbling

Event bubbling, where after the target element fires an event, the target element bubbles the event all the way to the top of the ancestor element.

The summary is three stages

  • Capture phase
  • Target element stage
  • Bubbling phase

Dom binding events

So how does dom bind events?

The first is DOM0

<div>I am content</div>
<script>
const div = document.querySelector('div')
 div.onclick = function () {
   // The triggered function
 }
</script>
Copy the code

Bind by on + event name. This bind event cannot be repeatedly bound because it responds only once. So you have DOM2.

Second, DOM2 level

<div>I am content</div>
<script>
const div = document.querySelector('div')
 div.addEventListener('click'.function () {
   // The triggered function
 }) 
</script>
Copy the code

Binding events are implemented through addEventListener, which supports repeated binding.

dom.addEventListener(type, fn, options)

It takes three arguments:

  • Type: event name,string type, such as click, or Scroll, etc.

  • Fn: function that responds when an event is triggered

  • Options: Supports the following two types

    • Boolean value:

      Represents whether the response is in the capture phase. The default is false and only responds during the bubble phase. True means that the response will only be made during the capture phase.

    • object

      • Capture: meaning the same as the Boolean value above
      • Once: Boolean value,trueIndicates that fn fires only once.
      • Passive: Boolean value,trueIndicates that default events are not blocked within FN.

example

Let’s take a look at the DOM’s event flow

  <style>
    .a-box {
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

    .b-box {
      margin: 20px;
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
  </style>
  <div class="a-box">Outside the box<div class="b-box">Inside the box</div>
  </div>
  <script>
    const aBox = document.querySelector('.a-box')
    const bBox = document.querySelector('.b-box')
    aBox.addEventListener('click'.function () {
      console.log('I am the outer box - capture')},true)
    bBox.addEventListener('click'.function () {
      console.log('I'm the inside box')
    })
    aBox.addEventListener('click'.function () {
      console.log('I'm the outer box. - Bubble.')},false)
  </script>
Copy the code

conclusion

The above is js DOM event flow knowledge, we can start to knock on the code, consolidate.

Thank you for reading.