Time waits for no one. Don’t give up on yourself. Don’t lie down

Event capture and event bubbling I think some of them are wrong, triggering event capture and event bubbling are the most internal element implementations.

Event capture

div1 -> div2 -> div3 -> div4

This happens when you trigger div4,

Common word: Jing ke to assassinate the King of Qin, poor work see this is trigger event, then come from outside a lot of guards, if Jing ke has a accomplice (event. StopPropagation ()) “Then they would block the guards from coming in, but as you can imagine, the assassination could not be successful, so they could not enter.

The event bubbling

div4 -> div3 -> div2 -> div1

This happens when you trigger div4,

Common word: jing ke to assassinate the king of Qin, work out () this is trigger event, then from the assassination of the news transmitted from the inside out, but ministers afraid of the news to the outside affect the stability of qin, so spread to some people when blocking the word (event. StopPropagation ())

<div id="div1" style="background-color: red;">
        div1
        <div id="div2" style="background-color: royalblue;">
            div2
            <div id="div3" style="background-color: violet;">
                div3
                <div id="div4" style="background-color: green;"</div> </div> </div><script>
    // Figure 1 event capture
        // let div4 = document.getElementById('div4');
        // let div3 = document.getElementById('div3');
        // let div2 = document.getElementById('div2');
        // let div1 = document.getElementById('div1');
        // div4.addEventListener('click',()=>{
        // console.log('div4')
        // },true)
        // div3.addEventListener('click',()=>{
        // console.log('div3')
        // },true)
        // div2.addEventListener('click',()=>{
        // console.log('div2')
        // },true)
        // div1.addEventListener('click',()=>{
        // console.log('div1')
        // },true)
      // Figure 2 events bubble up
      let div4 = document.getElementById('div4');
        let div3 = document.getElementById('div3');
        let div2 = document.getElementById('div2');
        let div1 = document.getElementById('div1');
        div4.addEventListener('click'.() = >{
            console.log('div4')},false)
        div3.addEventListener('click'.(event) = >{
            event.stopPropagation();

            console.log('div3')},false)
        div2.addEventListener('click'.() = >{
            console.log('div2')},false)
        div1.addEventListener('click'.() = >{
            console.log('div1')},false)
    </script>
Copy the code

Figure 1:

Figure 2:

Event broker and event delegate

// Bubble up according to the event

I think these two are the same thing, the individual and the lawyer, the individual is the client, the lawyer is the agent.

Event delegation and agency are mainly multiple PEOPLE whose DOM structure is on the same line. Because a matter wants to be litigated, it is entrusted to a lawyer.

Advantages: (Less code, no rewriting)

Delegate to a function, of course, need to manage fewer functions, fewer functions occupy less memory, change in the DOM structure of the content, do not need to change the content of the event handler can be normal events.

But bubbling is harmful half the time.