DOM event model and DOM event mechanism

Generally speaking, an event is an action performed by the user or the browser itself. It is a moment of interaction between a document or browser, such as a click button. Click is the name of the event. The interaction between JS and HTML is achieved through events, and DOM supports a large number of events.

Flow of events

The specified event flow has three phases: the event capture phase, the target phase, and the event bubbling phase.

Example:

 <div class="A">
    <div class="B">
      <div class="C">
        Click 
      </div>
    </div>
  </div>
Copy the code

capture

Capture is from A -> B -> C; See if there’s a function that listens for an event that has a parent element passed to a child element called capture

The bubbling

Bubbling is from C -> B -> A; See if there is a function that listens for the process proposed by Microsoft: event passing from child element to parent element, called bubbling

conclusion

The look-in listener function is called event capture; Looking for listeners from inside out is called event bubbling.

The W3C standards

W3C standard: Catch first, bubble later Binding events in C occur in code order, other non-C elements are triggered by bubble or capture. According to the W3C standard, a capture event is followed by a bubbling event. So the overall order of events is: A element capture -> B element capture -> C element code order -> B element bubble -> A element bubble

event

API addEventListener

W3C: baba.addEventListener('click',fn,bool)

If the bool is not passed, it defaults to false and bubbles

If the bool value is true, capture

Target is different from currentTarget

E.telget The element that the user operates on. E.currenttarget The element that the programmer listens on

Cancel the bubbling

Capture cannot be cancelled, bubble can be e. topPropagation interrupt bubble

Event delegation

How it works: DOM element events bubble up

Event Delegation is a common technique used in JavaScript to bind events, also known as Event Delegation. As the name implies, Event Delegation is the Delegation of response events that should be bound to child elements (click, keyDown…). Delegate to the parent element to take on the role of event listener.

Advantages of event delegation

<ul id="list">
    <li>click1</li>
    <li>click2</li>
    <li>click3</li>
    
    <! -... -->
    
    <li>clickn</li>
</ul>
Copy the code
  • Save memory footprint and reduce event registration (such as proxy for all LI click events on UL)

As the code above shows, binding a function to each

  • list item would be very memory consuming, so a better solution would be to bind the
  • element’s click event to its parent
      element, and then execute the event to match the target element.
    • You can listen for dynamic elements (click events for elements that do not currently exist)

    In the example above, there are very few list items

  • , and we bind events to each list item.

    • Most of the time, we need to dynamically add or remove the

  • element from the list through user action, so each change needs to re-bind the event for the new element and unbind the event for the element to be deleted.

    • This is not the case with event delegation, because events are bound to the parent layer and have nothing to do with the increase or decrease of the target element. Execution to the target element is matched in response to the actual execution of the event function, so using events can reduce a lot of repetitive work in the case of dynamically binding events.

    Example: js.jirengu.com/lofareteni/…

    setTimeout(() = >{
  const button = document.createElement('button')
  button.textContent='click1'
  div1.appendChild(button)
},1000)

div1.addEventListener('click'.(e) = >{
  const t =e.target
  if(t.tagName.toLowerCase()==='button') {console.log('button is click')}})Copy the code

    Encapsulating event delegate

    Example: js.jirengu.com/wapuposire/…

    setTimeout(() = > {
  const button = document.createElement('button')
  button.textContent = 'click1'
  div1.appendChild(button)
}, 1000)

on('click'.'#div1'.'button'.() = > {
  console.log('Button is clicked')})function on(eventType, element, selector, fn) {
  if(! (elementinstanceof Element)) {
    element = document.querySelector(element)
  }
  element.addEventListener(eventType, (e) = > {
    const t = e.target
    if (t.matches(selector)) {
      // Add a listener to the element to see if the current target satisfies the selector
      fn(e)
    }
  })
}
Copy the code
    conclusion

    Event delegation is the practice of placing event listeners on ancestor elements (such as parent or grandparent elements). The advantages are as follows: 1 saves the number of listeners 2 can listen to dynamically generated elements.

    Quote hungry man valley teaching pictures, code