This is the 9th day of my participation in the August Wen Challenge.More challenges in August

preface

“The colors of August are made of gold, bright and precious; The colors of August are brewed with the sun, fragrant and brilliant.”

In the future, I wish you to adjust yourself to the best state, slowly work hard, slowly become better

The event

The DOM element of the page constitutes the static element of our browser page, binding corresponding events to the specified DOM element to feedback the user’s behavior.

We can say that an event is a special instruction that the browser accepts when the user manipulates the interface.

When we talk about events, we basically refer to DOM node events, commonly known as mouse click events (Mousemove, Mouseover, Mouseout mousedown, mouseup).

There are three main stages of events, which we call event flow, namely the event capture phase, the target phase and the event bubbling phase

Dom standard event flow is triggered in the following sequence: capture first and then bubble. That is, when dom events are triggered, event capture is carried out first, and event bubble is carried out through event propagation after event source is captured.

So the event happens in the bubbling phase

The event bubbling

When an element receives an event, it passes the event to its parent, all the way to the window

Prevents events from bubbling

  1. event.stopPropagation()

Used directly in the event of a binding

  1. window.event.cancelBubble = trueAdd inaddEventListenerAdded event
import React, { useEffect } from 'react'; Export default (() () = > {useEffect = > {const handle () = = > {/ / can be used in the event of a native Windows. The event. The cancelBubble = true; console.log('click test element') } document.getElementById('test').addEventListener( 'click', handle, false ); return document.getElementById('test').removeEventListener('click', handle, false) }, []); const handleRoot = () => { console.log('click root element'); }; const handleParent = (e) => { console.log('click parent element'); }; const handleChild = (e) => { e.stopPropagation(); console.log('click child element'); }; </h3> <div style={{backgroundColor: '#eee', width: 400, height: 0; 400 }} onClick={handleRoot} > <div style={{ backgroundColor: '#aaa', width: 300, height: 300 }} onClick={handleParent} > <div style={{ backgroundColor: 'blue', width: 150, height: 100 }} onClick={handleChild} ></div> <div style={{ backgroundColor: 'green', width: 150, height: 100 }} id="test" ></div> </div> </div> </React.Fragment> ); };Copy the code

Event capture

Events fire from the least precise object (the Document object) and then pass the events to the children in reverse order of bubbling

Event delegation

It also has a name called event broker, and in JavaScript advanced programming:

Event delegation uses event bubbling to manage all events of a certain type by specifying only one event handler.

html:

<ul id="ul">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
Copy the code

js:

document.getElementById('ul').addEventListener('click', function (e) {
        console.log(e.target.tagName.toLowerCase());

        if(e.target.tagName.toLowerCase() === 'li'){
            console.log(e.target.innerHTML);
        }
    }, false); 
Copy the code

Click

  • 1

    • to print: li 1

    Click

  • 2

    • to print the result: li 2

    Click

  • 3

    • to print: li 3

    We don’t bind any events to Li, but if we click on li, it will work, which is the application of the event bubbling or event trapping we talked about earlier. When we click on Li, we pass the click event to ul’s parent, ul, and then execute ul’s function, delegating li’s event to ul’s function.

    conclusion

    If this article helped you, please like 👍 and follow ⭐️

    If there are any errors in this article, please correct them in the comments section 🙏🙏.