Event delegation in JavaScript (jQuery)

1: What is event delegation?

Event delegation uses event bubbling to specify only one event handler to manage all events of a certain type.

2: Why use event delegation?

1. The number of event handlers added to the page in JavaScript is directly related to the overall running performance of the page. why? Because each event handling function is an object, the object will occupy memory. The more objects in the memory, the worse the performance. In addition, the number of DOM visits caused by having to specify all event handlers in advance will delay the overall page's interactive readiness time.
2. Adding events one by one to tables with many data and long lists is simply a nightmare. Therefore, event delegation can greatly improve the running performance of the page and reduce the workload of developers.

3: Example in JavaScript

We take the following HTML code as an example, and use event delegation to realize that when the mouse clicks on a li element, The background of the li element turns red.

       <ul id = "lists">
         <li>列表1</li>
         <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
         <li>列表5</li>
          <li>列表6</li>
   </ul>

The following is the JavaScript code:

var lists = document.getElementById("lists"); 
          lists.addEventListener("click",function(event){
              var target = event.target;
              //防止父元素ul也触发事件
              if(target.nodeName == "LI"){
                 target.style.backgroundColor = "red";
              }
         })

Click List 4 to achieve the effect:

Four: Examples in jQuery

The event delegation methods in jQuery are relatively rich. Let’s take the same example:

1. Use the on method, the code is as follows:

 $(function(){
            $("#lists").on("click","li",function(event){
                 var target = $(event.target);
                 target.css("background-color","red");
             })
         })

2. Use the delegate() method, the code is as follows:

$(function(){
            $("#lists").delegate("li","click",function(event){
                var target = $(event.target);
                 target.css("background-color","red");
             })
         })

on() method and delegate() method are very similar to the writing of event delegation. And when executing event delegation, only the child element (li in this article) will trigger the event, and the parent element (ul in this article) will not trigger the event, so we do not need to judge the element node name that triggers the event. This One thing that is significantly better than native JavaScript.

3. Use the bind() method, the code is as follows:

$(function(){
             $("#lists").bind("click","li",function(event){
                 var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                 target.css("background-color","red");}
             })
         })

The bind() method is the same as the native JavaScript implementation method. When the parent element executes the event on behalf of the child element, the parent element will also Trigger an event, so we need to determine the element name that triggers the event. In addition, when using the bind() method to bind events to elements, please note that it can only add events to existing DOM elements and cannot add events to future DOM elements.

Element addition event. If you want to add DOM elements frequently and bind events to the newly added DOM elements, use live(), delegate(), on() and other methods. Since jQuery does not recommend the live() and delegate() methods since jQuery 1.7, you should still use the on() method.

The above is the detailed content of Event delegation in JavaScript (jQuery). For more information, please follow other related articles on the PHP Chinese website!