What are event flows and event models in JS?

I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

A, events,

Before we look at what a JS event flow is, let’s look at what a JS event is. Refer to the W3c explanation

An HTML event is something that happens on an HTML element

When using javaScript in HTML, javaScript can handle these events

To give some examples of common events:

• OnClick (mouse click element)
• Onmouseover (mouseover element)
• Onmouseout (mouse over element)
• Onkeydown (press the keyboard key)
• .

2. Event flow

Now that we know what an event is, what is a stream of events?

Let’s take it literally. Events we already know what they are. What about flows? Let’s take a look at Baidu’s explanation of streaming

Can we think of event flow as the order in which events are received from the page? These events are linked together to form a liquid whole, and the events in this whole have their own execution order. This is the event flow.

3. Event flow model

There are two more models in the event flow

• Event capture
• The event bubbling

Here we refer to a diagram to help us understand the event flow model

The event bubbling

When a node event is triggered, events of the same type are triggered from the inner circle to the outer circle div–>body–> HTML –>document, all the way to the DOM root node

Event capture

When a node event is triggered, events of the same type are triggered from the DOM root node to the ancestor node until the current node itself is triggered. From the outer circle to the inner circle Document –> HTML –>body–>div

History of event flow model

Event bubbling was introduced by IE, and event capture is an event stream concept introduced by Netscape.

ECMAScript later integrated the two models to create a unified standard: capture first in bubbling

The integrated standard event flow now has three phases:

1. Event capture phase (target does not receive events during capture phase)
2. Target phase (the execution phase of the event, which is referred to as the bubbling phase)
3. Event bubbling phase (events return to Dom root node)

DOM2 events specify that no target-stage events are involved in the capture phase, but in IE9, Safari, Chrome, Firefox, Opera9.5 and later, events on the target event are triggered in the capture phase

Five, the addEventListener ()

The addEventListener() method is used to add an event handle to the specified element.

AddEventListener () captures the presentation

<div id="btn1" style="height: 150px; width: 150px; background: red; color: #fff">
    btn1
    <div id="btn2" style="height: 100px; width: 100px; background: green; color: #fff">
        btn2
        <div id="btn3" style="height: 50px; width: 50px; background: blue; color: #fff">
            btn3
        </div>
    </div>
</div>

<script>
  let btn1 = document.getElementById('btn1')
  let btn2 = document.getElementById('btn2')
  let btn3 = document.getElementById('btn3')
  btn1.addEventListener('click'.function (){
    alert('btn1')},true)
  btn2.addEventListener('click'.function (){
    alert('btn2')},true)
  btn3.addEventListener('click'.function (){
    alert('btn3')},true)
</script>
Copy the code

Let’s see this code in action when we click on Btn3

Let’s see this code in action when we click on Btn2

Since the last parameter of addEventListener() is set to true, the entire execution is captured. Start at the current Dom root node and work up to the current node itself.

AddEventListener () bubble demo

It’s the same code, except here we change the last parameter of addEventListener() to false and set the execution to bubble.

Since the last argument to addEventListener() defaults to false(bubble), you can leave it at that

<div id="btn1" style="height: 150px; width: 150px; background: red; color: #fff">
    btn1
    <div id="btn2" style="height: 100px; width: 100px; background: green; color: #fff">
        btn2
        <div id="btn3" style="height: 50px; width: 50px; background: blue; color: #fff">btn3</div>
    </div>
</div>

<script>
  let btn1 = document.getElementById('btn1')
  let btn2 = document.getElementById('btn2')
  let btn3 = document.getElementById('btn3')
  btn1.addEventListener('click'.function (){
    alert('btn1')},false)
  btn2.addEventListener('click'.function (){
    alert('btn2')},false)
  btn3.addEventListener('click'.function (){
    alert('btn3')},false)
Copy the code

Let’s take a look at the execution

You can see that the execution sequence is to execute the node’s own events first, and then the same type of events of its ancestor nodes up to the Dom root node.

StopPropagation (

The stopPropagation() method prevents propagation of the same event from being called.

Propagation means bubbling up to the parent element or capturing down to the child element.

We use stopPropagation() function on Btn2

<div id="btn1" style="height: 150px; width: 150px; background: red; color: #fff">
    btn1
    <div id="btn2" style="height: 100px; width: 100px; background: green; color: #fff">
        btn2
        <div id="btn3" style="height: 50px; width: 50px; background: blue; color: #fff">btn3</div>
    </div>
</div>

<script>
  let btn1 = document.getElementById('btn1')
  let btn2 = document.getElementById('btn2')
  let btn3 = document.getElementById('btn3')
  btn1.addEventListener('click'.function (){
    alert('btn1')},false)
  btn2.addEventListener('click'.function (event){
    event.stopPropagation()
    alert('btn2')},false)
  btn3.addEventListener('click'.function (){
    alert('btn3')},false)
</script>
Copy the code

Let’s take a look at the execution

You can see that when we click on btn3 we bubble up to btn2 and terminate

Application of event flow model

Event delegate, also called event delegate, refers to the use of event bubbling principle. You only need to add events to the outer parent container, and if the inner child element has a click event, it will bubble to the parent container. This is event delegate, simply put: child elements entrust their parent to execute events.

Where does this apply? Here’s an example:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
Copy the code

We now have a list where I want to listen for all of the

let ulDom = document.getElementsByTagName('ul')
ulDom[0].addEventListener('click'.function(event){
    alert(event.target.innerHTML)
})
Copy the code

Let’s take a look at the implementation

As you can see, we have added click events to each

Advantages of event delegation

Let’s summarize the optimization of event delegation:

• Improved performance: Each function takes up memory, so adding an event handler to broker all events takes up less memory.
• Dynamic listener: Dynamically added elements can be automatically bound using event delegate, that is, new nodes can have the same events as other elements without being actively added.