The DOM event flow

define

The DOM event flow consists of three phases

• Capture phase: The triggering response of an event moves from the outermost target layer in to the lowest layer;
• Target phase: The target phase refers to the event response to the lowest element that triggers the event;
• Bubble phase: The triggering response of an event moves from the lowest target layer to the outermost layer;

Events are propagated in a specific order from element node to element node, and this propagation is called the DOM event flow

legend

Event delegation

concept

Event delegation, which delegates functions that respond to events from one element to another element; Will, in general, the elements of one or a set of events entrusted to its parent layer or outer element, real binding event is outer element, when the incident response to need binding elements, through the event bubbling mechanism bind the event to trigger its outer elements, and then in the outer elements to perform the function.

advantages

1. You can reduce event registration and save memory usage

We have many seats in each row, and we need to switch the reservation status when clicking on the seat;

<div class="area">
    <div class="row">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
    </div>
//div.row*20
<div class="area">
Copy the code

Binding a function to each seat adds a lot of DOM manipulation and takes up a lot of memory. If the seat click event is bound to an appropriate outer element (area) with an event delegate, then the target element is matched when the event is executed (use e.target). So event delegation can improve memory and performance.

2. Binding events suitable for dynamic elements

New elements can also have listeners, and they can also have event triggers.

Example – Seat reservation

preview

layout

<h1> Movie seat reservation </h1><ul class="seatExample">
        <li>
            <div class="seat example"></div>
            <small>optional</small>
        </li>
        <li>
            <div class="seat selected example"></div>
            <small>The selected</small>
        </li>
        <li>
            <div class="seat occupied example"></div>
            <small>Do not choose</small>
        </li>
    </ul>

    <div class="area">
        <div class="screen"></div>
    </div>
Copy the code

Seat reservation

Dynamic generation of seats:

const oarea = document.querySelector(".area");
const oseat = document.querySelectorAll("row .seat:not(.occupied)");

window.onload = function createState() {
    for(let i = 1; i<=6; i++){let row = document.createElement('div')
        oarea.appendChild(row)
        row.setAttribute('class'.'row')
        for(let j = 1; j<=8; j++) {let newseat = document.createElement('div');
            row.appendChild(newseat);
            newseat.setAttribute('class'.'seat');
            // newseat.addEventListener('click',function(e){
            // if(newseat.classList.contains('seat')&&
            / /! newseat.classList.contains('occupied'))
            / / {
            // newseat.classList.toggle('selected');
            / /}}}}Copy the code

Add styles to the added elements using the setAttributet method, and you can write your own CSS code to suit your own needs.

The comment part is to bind events when each seat element is created.

Using event delegate, add a listener to the outermost.area so that every time you click on a seat, it bubbles to the outer.areo (.seat>.row>.area) and e.target returns to the target node.

oarea.addEventListener("click".function(e){
    if(e.target.classList.contains('seat') &&! e.target.classList.contains('occupied'))
    {
        e.target.classList.toggle('selected'); }})Copy the code

At the end

So that’s the use of event delegate for movie seat reservations. Before reading the introduction of the event delegate article is mostly with abstract examples to explain, so I supplement the application in specific situations.