Event bubbling and event capture and event delegation

1. Event bubbling

Event bubbling: Elements in a structural (non-visual) nesting relationship will have the function of event bubbling, that is, the same event, bubbling from the child element to the parent element.

About the event capture and event bubbling process diagram: The order of the two is to capture first and then bubbling.

Event bubbling is when the element in the parent box is clicked, the event of the child element is triggered first, and then the event of the parent box is triggered.

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

  let wrapper = document.getElementsByClassName('wrapper')[0]
  let content = document.getElementsByClassName('content')[0]
  let box = document.getElementsByClassName('box')[0]
    // 冒泡
  wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
  content.addEventListener('click',()=>console.log("content1") ,false)
  box.addEventListener('click',()=>console.log("box1") ,false)

The print result after clicking the child element box is as shown in the figure below, and event bubbling has occurred

2. Event capture

Event capture: There can only be one event type for an object on Google Chrome.
The third parameter of addEventListener turns false into true. The bubbling becomes the capture function. The parent box captures the event first, and the child box captures the
structure. The upper (not visually) nested elements will have the function of event capture, that is, the same event is captured from the parent element to the child element (event source element)

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

let wrapper = document.getElementsByClassName('wrapper')[0]
    let content = document.getElementsByClassName('content')[0]
    let box = document.getElementsByClassName('box')[0]

    // 捕获
    wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

Print order:

However, when the code can show capture and bubbling at the same time

 wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

    wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
    content.addEventListener('click',()=>console.log("content1") ,false)
    box.addEventListener('click',()=>console.log("box1") ,false)

It can be seen that the order is first capture and then bubbling

Talk about this in this nuggets

3.addEventListener

addEventListener is the operation of a new designated event handler for DOM2 events. This method receives 3 parameters: the name of the event to be processed, as the function of the event handler, and a boolean value. If the boolean value is true, it means that it is capturing The event handler is called in the phase; if it is false, it means that the event handler is called in the bubbling phase.
addEventListener third parameter

4. Event delegation

Use event bubbling to process with the event source object
Advantages:
1. Performance does not require looping all elements to bind events one by one
2. Flexible When there are new child elements, there is no need to re-bind events

Example Click the li label to print the content of the corresponding label.
Primary knowledge: event object event and event source object event.target

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  //利用事件冒泡将子元素li的点击事件委托到父元素ul上 点击对应的li答应出li的内容
let ul = document.getElementsByClassName('ul')[0]
    ul.onclick = e => {
    
    
      console.log(e)
      console.log(e.target)
      console.log(e.target.innerText)
    }

supplement

• Events such as focus, blur, change, submit, reset, select, etc. do not bubble
• Cancel bubbling:
  W3C standard event.stopPropagation(); but does not support versions below ie9
  IE unique event.cancelBubble = true;
• Prevent default events:
  default event — form submission, a tag jump, right-click menu, etc.
  1.return false; only events registered as object properties take effect
  2.event.preventDefault(); W3C mark, not compatible with IE9 and below
  3. event.returnValue = false; Compatible with IE