• Today we are going to talk about the execution mechanism of events

  • What is the execution mechanism of events?

    • Think about a problem?

    • When a large box is nested with a small box, and both boxes have click events

    • You click on the inside of the small box, the big box outside of the click event should be executed

Transmission of events

  • Just like the picture above, when we click on the red box, we also click on the pink box
  • If this is a given, then the click event for both boxes will be triggered
  • This is calledTransmission of events
    • When an element fires an event, its parent fires the same event, and the parent’s parent fires the same event
    • Like the picture above
    • Clicking on the red box triggers the red box click event
    • Also click on the pink box, will trigger the pink box click event
    • Clicking on the body will also trigger the body click event
    • Also click on the HTML, will trigger the HTML click event
    • If you click on document, it will trigger the document click event
    • Click on the window also triggers the window click event
    • That is, each element on the page triggers an event, layer by layer, that will eventually trigger the same event for the window, as long as the elements at each level register the same event
  • During event propagation, there are some points to note:
    1. They just spread the same kind of thing
    2. Events will be triggered just from clicking on the element and working up through the HTML structure
    3. If the upper element has the event, the upper element’s event will be emitted regardless of whether the inner element has the event or not
  • Now that we know about the propagation of events, let’s think about another question
    • The event does start with itself, and all the same events to the window will fire
    • That’s because we’re clicking on ourselves, and literally clicking on every element up to the window layer by layer
    • However, it is not clear whether he or she clicked on him first or the window first
    • So if you start with yourself, you start with your own event handler, and then you go up and you end up with the window’s event handler
    • Otherwise, it executes the window’s event handler first, and then executes its own event handler layer by layer

Bubble, capture, target

  • So, as we said, for every event, it’s possible to execute multiple events of the same type from itself to the window
  • So there’s some idea of the order of execution

The target

  • Which element did you click on, and what is the target of the event

The bubbling

  • Start at the event target’s event handler and work outward until the window’s event handler fires
  • That is, execute event handlers from the bottom up

capture

  • Start at the window’s event handler and work inward until the event target’s event handler executes
  • That is, execute event handlers from the top down

The difference between bubbling and capturing

  • In event propagation, multiple event handlers of the same type are executed in different order

Event delegation

  • It’s delegating what I have to do to someone else
  • Because of our bubbling mechanism, clicking on the child will trigger the same event for the parent
  • So we can delegate the child’s events to the parent

Events trigger

  • When a child element is clicked, it does not matter if the element has a click event, but if the parent element has a click event, then the parent element’s click event can be triggered

    <body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click'.function (e) {
      console.log('I'm ul's click event, I'm triggered.')})</script>
</body>
Copy the code
    • Like the code above, ul will definitely trigger when you click on it
    • But when you click on Li, it’s actually triggered

target

  • The target property is the property in the event object that represents the target you clicked on

  • Target is the element on which you click when you trigger the click event

  • This target is also incompatible with using srcElement in IE

    <body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click'.function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
      console.log(target)
    })
  </script>
</body>
Copy the code
    • In the code above, when you click ul, target is ul
    • When you click on li, target is Li

entrust

  • At this point, when clicking on LI, the ul click event can also be triggered

  • And inside the event, you can also check whether you clicked ul or Li

  • At this time, we can entrust the event of Li to UL

    <body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click'.function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
     
      // Check if you clicked on Li
      if (target.nodeName.toUpperCase === 'LI') {
      	// Make sure you click on Li
        // Because nodeName should be 'ul' when you click on ul
        // Do what you should do when you click on Li
        console.log('I'm Li, I got clicked')}})</script>
</body>
Copy the code
    • With the above code, we can delegate what Li needs to do to UL

conclusion

  • Why use event delegates
    • I don’t have Li on my page itself
    • I added some Li through the code
    • The added li has no click events
    • I have to re-bind the click event to Li after every dynamic operation
    • More troublesome
    • In this case, just delegate to UL
    • Since the newly added li is also a child of UL, clicking on it can also trigger the UL click event
  • Writing of event delegation
    • The events of an element can only be delegated to the same event of a structure parent or substructure parent
    • For example, li’s click event cannot be delegated to UL’s mouse-in event
    • Li’s click events can only be delegated to UL or the highest parent click events

The default behavior

  • Default behavior is something that exists without us registering it
    • For example, when we click the right mouse button, a menu will pop up automatically
    • For example, when we click a tag, we do not need to register the click event, he will jump to the page
    • .
  • These things that we don’t need to register to do, we call default events

Blocking default behavior

  • Sometimes we don’t want the browser to execute default events

    • For example, I bind a click event to tag A, and I hope you can tell me your address when I click on you
    • Instead of jumping directly to links
    • So we need to prevent the default event of tag A from executing the default event

  • We have two methods to block the default event

    • e.preventDefault(): Not used by IE
    • e.returnValue = false: use IE

  • We also need to write a compatible script when we block the default event

    <a href="https://www.baidu.com">Let me try it</a>
<script>
	var oA = document.querySelector('a')
  
  a.addEventListener('click'.function (e) {
    e = e || window.event
    
    console.log(this.href)
    
    e.preventDefault ? e.preventDefault() : e.returnValue = false
  })
</script>
Copy the code
    • So when you’re done, when you click on the A TAB, you don’t jump to the link
    • Instead, it prints out the value of the href attribute for the A tag on the console