What does jquery event proxy mean?

In jquery, the event proxy means binding the event to the parent element and waiting for the event to bubble to the element through the DOM before executing it; the event proxy uses the principle of event bubbling to send the event to the element. Added to the parent, by determining the source of the event and performing operations on the corresponding child elements, it can greatly reduce the number of event bindings and improve performance.

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

What is the meaning of jquery event proxy

In jQuery, event proxy means: binding the event to the parent element, and then waiting for the event to bubble to the element through the DOM before executing it. .

The event proxy uses the principle of event bubbling (event bubbling means that the event will be passed level by level to its parent), add the event to the parent, and execute the corresponding action by judging the source of the event. For operations on child elements, event proxies can first greatly reduce the number of event bindings and improve performance; secondly, they can allow newly added child elements to have the same operations.

There are two ways to trigger events during the event listening process: event capturing and event bubbling. Events bubble up faster and more efficiently.

Event capture: Events sink to descendant elements in the DOM.

Event bubbling: Events bubble up through the DOM from the source element where the event occurred.

jQuery uses event bubbling to handle all events. The jQuery library provides three methods to bind event handling functions of elements, namely bind(), live(), and delegate().

1. Use .bind() to bind the event processing function: two parameters must be provided, the first is the event type, and the second is the event processing function.

.bind(event type,event handle)

For example:

$(document).ready(function(){
　　$(".selector").bind("click",alertMe);
function alertMe(){
　　alert("Hello world!");
}
});

.bind() method is only suitable for binding event handlers to elements that already exist in the DOM . This has no effect on DOM elements added later when passing through the action script.

Imagine: There is a .box element in the DOM. You want a link to copy this element every time it is clicked and add it to the DOM. First, we can bind an appropriate click event handler to this link. Every time you click this link, the .clone() method will be called once, copy the box element and append it to the corresponding container:

$(document).ready(function(){
    $('.box').bind('click',function(){
        $(this).clone().appendTo('.container');        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

Run in the browser, the result is that when you click this link, Append elements. But when clicking on an element other than the first link, the click event will not be executed.

Therefore: the bound click event cannot act on these new elements that have just been added to the DOM. Only elements that exist in the DOM at the moment of binding the event will successfully bind the click event. The click event is only bound to the first element, so although the first element can be cloned continuously, none of the cloned elements can be affected by the click event. If you want this cloned element to be affected by click events, you can use .live() binding.

2. Use .live() to bind event processing functions

.live() method provides a very flexible way to capture events. Its usage is very similar to .bind(). The only difference is that the .live() method not only works on elements that currently exist in the DOM, but also on elements that may exist in the future (dynamically generated).

.live(event type,event handle)

Modify the above example:

$(document).ready(function(){
    $('.box').live('click',function(){
        $(this).clone().appendTo('.container');        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

3. Use .delegate() to bind the event processing function

.delegate(selector, event type, event handler)

Modify the above example:

<script type="text/javascript">
  
  $(document).ready(function(){
        $(&#39;.container&#39;).delegate(&#39;.box&#39;,&#39;click&#39;,function(){
            $(this).clone().appendTo(&#39;.container:first&#39;);        
        });
    });    
  </script>
  <body>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
  </body>

The execution effect is the same as using .live() to bind the event processing function. But using .delegate() to bind event handling functions is more efficient than using .live(). Part of the source code of the jQuery library related to binding

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },
    live: function( types, data, fn ) {
        alert(this.context); //添加一行
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },
    delegate: function( selector, types, data, fn ) {
        alert(this); //添加一行
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
    },

adds a line to the live and delegate methods respectively. After the browser is run, use .live(), and the document will pop up, which means using .live() to bind A certain event whose source is the document. Using .delegate(), the object pops up, that is to say, using .delegate() to bind the event, its source is the specific bound element. Therefore, using .delegate() is more efficient than using .live().

As can be seen from the source code, use .bind() to bind the event processing function, and use unbind() to cancel the event binding.

Use .live() to bind event processing functions, and die() to cancel event binding.

Use .delegate() to bind the event processing function, and use undelegate() to cancel the event binding.

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of What does jquery event proxy mean?. For more information, please follow other related articles on the PHP Chinese website!