Home  >  Article  >  Web Front-end  >  What is javascript event delegation

What is javascript event delegation

青灯夜游
青灯夜游Original
2021-04-07 12:55:022619browse

In JavaScript, event delegation uses the principle of bubbling to add events to parent elements or ancestor elements to trigger execution effects. The advantages of event delegation: 1. It can improve JS performance; 2. It can dynamically add DOM elements without modifying event bindings due to changes in elements.

What is javascript event delegation

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

1. What is event delegation?

#Event delegation uses the principle of bubbling to add events to parent elements or ancestor elements to trigger execution effects.

Example: Bind the click event in the document. When the click object is the button btn, the pop-up box displays the value of the button btn

<body>

<button id="btn" value="嘿嘿">哈哈</button>

<script>
  window.onload=function () {

    let btn=document.getElementById("btn")
    document.onclick=function (e) {
      // console.log(e.target)
      if(e.target===btn){
        alert(btn.value)
      }
    }

  }
</script>
</body>

What is javascript event delegation

2. Advantages of event delegation

#(1) Can improve JS performance

Example: Create on ul 100 li, click on each li and a pop-up box will display the value of the li

Traditional writing method: bind the onclick event to each li and trigger the alert event

Event delegation: Bind the onclick event on the document. When the onclick event is triggered, determine whether it is a

  • tag. If it is, alert the value of the
  • tag.

    (2) DOM elements can be added dynamically, and there is no need to modify event bindings due to changes in elements.

    3. Things to note about event delegation

    The element to which the event delegation is bound should preferably be the parent of the element being monitored Elements, such as

      above
    • , above , etc.

      Because the process of event bubbling is also time-consuming. The closer to the top level, the longer the "event propagation chain" of the event and the more time-consuming it is.

      4. Event bubbling and event capturing

      What is javascript event delegation

      As shown in the figure, event bubbling is from the sub- Elements transmit events to parent elements, layer by layer. Event delegation uses the bubbling principle; event capture is propagated from the top-level object of the DOM to child elements layer by layer.

      For more programming related knowledge, please visit: Programming Video! !

  • The above is the detailed content of What is javascript event delegation. For more information, please follow other related articles on the PHP Chinese website!

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn