The javascript event Delegate is bound to the on, off, and one events of jQuery.

The javascript event Delegate is bound with the jQuery event on, off, and one I. event Delegate.
What is event delegation? In reality, 100 students receive express deliveries at noon one day,
If 100 students cannot stand at the school gate at the same time, they will entrust the guard to collect the information and then hand it over to the students one by one.
In jQuery, we use the event bubbling feature to let the events bound to the child element bubble to the parent element (or the ancestor element)
And then proceed with the relevant processing.
If an enterprise-level application performs report processing, the table contains 2000 rows and each row has a button for processing. If you use
Before. bind () processing, we need to bind 2000 events, like 2000 students standing at the school gate at the same time.
Express Delivery will continue to block intersections, and there will be various accidents. This is also the case on the page, which may cause the page
Extremely slow or directly abnormal. In addition, the. bind () method cannot be dynamically bound if the 2000 buttons use ajax paging.
Element that does not exist. For example, if a new transfer student cannot verify his identity, the courier may not receive the courier.
// HTML part

// Use. bind (). It does not support dynamic binding. Only the original button can be clicked.

$('.button').bind('click', function () {$(this).clone().appendTo('#box');});

// Use. live () for dynamic binding. Use jQuery1.3, discard jQuery1.7, and delete jQuery1.9.

$('.button').live('click', function () {$(this).clone().appendTo('#box');});

The. live () principle is to bind the click event to the ancestor element $ (document), instead of binding $ (document)
Set once instead of 2000 times. Then, you can process the click events of the buttons dynamically loaded in the future. Accept Any
When you click an event, both the event (event.type.zip and event Target (event.tar get) will be checked.
If the event is a. button, execute the handler entrusted to it .. The live () method has been deleted and cannot be used. Yes
To test the usage, You need to introduce the backward compatible plug-in.

//. Live () cannot be called with Link concatenation because of the parameter features $ ('# box '). children (0 ). live ('click', function () {$ (this ). clone (). appendTo ('# box ');});

In the above example, we use. clone () clone. In fact, if we want to copy the event behavior, we only
You need to pass true to:. clone (true ). In this way, similar event delegation functions can also be implemented, but the principles are quite different.
One is copying event behaviors, and the other is event delegation. In non-clone operations, such functions can only use event delegation.

$ ('. Button'). live ('click', function () {$ (''). AppendTo (' # box ');});

When we need to stop event delegation, we can use. die () to cancel it.

$ ('. Button '). die ('click'); because. live () and. die () is obsolete in jQuery1.4.3, and then a method with clear semantics, reduced bubble propagation layers, and support for Link concatenation calling is introduced :. delegate () and. undelegate (). However, this method is replaced by. on () method integration in jQuery1.7. $ ('# Box '). delegate ('. button ', 'click', function () {$ (this ). clone (). appendTo ('# box');}); $ (' # box '). undelegate ('. button ', 'click'); // supports the concatenation call method $ ('P '). first (). delegate ('. button ', 'click', function () {$ (this ). clone (). appendTo ('P: first ');});

Note:. delegate () needs to specify the parent element. The first parameter is the current element, and the second parameter is the event party.
The third parameter is the execution function. As with the. bind () method, additional parameters can be passed .. Undelegate () and. unbind ()
You can directly delete all events, such as. undelegate ('click '). You can also delete namespace events,
For example:. undelegate ('click. abc ').
Note: The. live () and. delegate () methods and. bind () methods are event binding, so the difference is also obvious.
Follow two rules: 1. When many elements in the DOM are bound to the same event; 2. There is no forthcoming
When an element is bound to an event, we recommend that you use the event Delegate binding method. Otherwise, we recommend that you use the. bind () normal binding method.

II. on, off, and one
Currently, there are six binding events and unbinding methods in three groups. The coexistence of these three groups may cause some confusion,
Therefore, after jQuery1.7, The. on () and. off () methods were introduced to discard the first three groups.
/

/Substitution. bind () method $ ('. button '). on ('click', function () {alert ('alternative. bind () ');}); // replace. bind () method, and use additional data and event object $ ('. button '). on ('click', {user: 'lil'}, function (e) {alert ('alternative. bind () '+ e. data. user) ;}); // replace. bind () and bind multiple events $ ('. button '). on ('mouseover mouseout', function () {alert ('alternative. bind () Move in and out! ');}); // Replace. bind () mode, bind multiple events in Object Mode $ ('. button '). on ({mouseover: function () {alert ('alternative. bind () Move in! ');}, Mouseout: function () {alert (' replace. bind () Remove! ') ;}}); // Replace. bind () method to prevent default behavior and cancel bubbling $ ('form '). on ('submit ', function () {return false ;});

Or

$ ('Form '). on ('submit ', false); // replace. bind () method to block default behavior $ ('form '). on ('submit ', function (e) {e. preventDefault () ;}); // replace. bind () method, cancel bubble $ ('form '). on ('submit ', function (e) {e. stopPropagation () ;}); // replace. unbind () method, remove event $ ('. button '). off ('click'); $ ('. button '). off ('click', fn); $ ('. button '). off ('click. abc '); // replace. live () and. delegate (), event delegate $ ('# box '). on ('click ','. button ', function () {$ (this ). clone (). appendTo ('# box ');} ); // Replace. die () and. undelegate (), cancel event Delegate $ ('# box '). off ('click ','. button '); Note: similar to the previous method, event delegation and cancellation of event delegation also have various matching methods, such as extra data and namespaces, which are not described here. Whether it is. bind () or. on (), events are not automatically removed after the event is bound. You need to manually remove the event through. unbind () and. off. JQuery provides the. one () method. After the binding element is executed, the event is automatically removed. You can trigger only one event. // Similar to. bind (), trigger only once $ ('. button'). one ('click', function () {alert ('one is only triggered once! ');}); // Similar. delegate () is triggered only once $ ('# box ). one ('click', 'click', function () {alert ('one is only triggered once! ');});

Iii. Event delegation example:

Html code:

JQuery code:

$ ('P '). click (function (e) {alert ('event type: '+ e. type + ', Value:' + parameters (e.tar get ). val ());})

Click button 1 to bring up the event type: click, Value: button 1.

Note: For example, clickdeskmousedowndemoe.tar get returns the jQuery object that triggers the event.

4. A javascript online testing tool is recommended. You can select a JQuery library to test html, css, and js Code.

Http://jsfiddle.net

The above is the javascript event Delegate and jQuery event binding on, off, and one content. For more information, see PHP Chinese Web (www.php1.cn )!