JavaScript event delegates and jquery event bindings on, off, and one

I. Event delegation
What is an event delegate? In reality, there are 100 students who receive a courier at noon, but this
100 students can not stand at the school gate at the same time, then will entrust the doorman to collect, and then handed over to the students.
In jquery, we use event bubbling to bubble events that bind child elements to parent elements (or ancestor elements).
And then proceed with the relevant processing.
If an enterprise application does report processing, the table has 2000 rows, and each row has a button handle. If you use
Before the. bind () processing, then you need to bind 2000 events, just like 2000 students at the same time standing at the school gate and so on
Express, will continue to block the intersection, there will be a variety of accidents. This situation is also the same on the page, which may cause the page
Noticeably slower or directly abnormal. And, with 2000 buttons using Ajax paging, the. bind () method cannot bind dynamically yet
An element that does not exist. Like, the new transfer student, The courier cannot verify his identity, may not receive the courier.
HTML section
<div style= "background:red;width:200px;height:200px;" id= "box" >
<input type= "button" value= "Pushbutton" class= "buttons"/>
</div>
Using. Bind () does not have dynamic binding capabilities, only the original button can be clicked to generate
$ ('. Button '). Bind (' click ', function () {
$ (this). Clone (). AppendTo (' #box ');
});
Use. Live () with dynamic bind function, jQuery1.3 use, jQuery1.7 after discard, jQuery1.9 delete
$ ('. Button '). Live (' click ', function () {
$ (this). Clone (). AppendTo (' #box ');
});
The. Live () principle is to bind the click event to the Ancestor element $ (document), but only to the $ (document) binding
Once, not 2000 times. You can then handle the click events for subsequent dynamically loaded buttons. In accepting any
Event, the $ (document) object checks the event type (Event.type) and the event target (event.target) if the click
The event is. Button, then executes the handler entrusted to it: the Live () method has been deleted and cannot be used. Need
To test the use, you need to introduce backwards compatible plugins.
. Live () cannot be called with link concatenating because the attributes of the parameters cause
$ (' #box '). Children (0). Live (' click ', function () {
$ (this). Clone (). AppendTo (' #box ');
});
In the example above, we used a. Clone () clone. In fact, if we want to copy the event, we only
You need to pass true to:. Clone (True). This also enables similar event delegation functions, but the principle is quite different.
One is the replication event behavior, and one is the event delegate. In the case of non-cloning operations, this type of feature can only use event delegates.
$ ('. Button '). Live (' click ', function () {
$ (' <input type= ' button "value=" Copy of "class=" button "/> '). AppendTo (' #box ');
});
When we need to stop the event delegate, we can use. Die () to cancel.
$ ('. Button '). Die (' click ');
Since. Live () and. Die () are deprecated in the jQuery1.4.3 version, they are then introduced with clear semantics, reduced bubbling propagation levels,
also supports methods for linking concatenating calls:. Delegate () and. Undelegate (). But this method in the jQuery1.7 version
Replaced by the. On () method integration.
$ (' #box '). Delegate ('. Button ', ' click ', function () {
$ (this). Clone (). AppendTo (' #box ');
});
$ (' #box '). Undelegate ('. Button ', ' click ');
Support for concatenating invocation mode
$ (' div '). First (). Delegate ('. Button ', ' click ', function () {
$ (this). Clone (). AppendTo (' Div:first ');
});
Note: the. Delegate () needs to specify the parent element, then the first parameter is the current element, the second argument is the event party
, the third parameter is the execution function. As with the. bind () method, additional parameters can be passed: undelegate () and. Unbind ()
method, you can delete all events directly, such as:. Undelegate (' click '). You can also delete the event for a namespace,
For example:. Undelegate (' Click.abc ').
Note: the. Live () and. Delegate () and. Bind () methods are all event bindings, so the difference is obvious, and the use
Follow two rules: 1. When many elements in the DOM are bound to the same event, 2. There is no pending build in the DOM yet
When an element binds an event, it is recommended to use the binding method of the event delegate, otherwise the normal binding of. Bind () is recommended.

Two On, off, and one
There are currently three groups of six methods for binding events and bindings. Because the coexistence of these three groups can cause some confusion,
For this reason jQuery1.7 was introduced. The On () and. Off () methods completely discard the previous three groups.
Override. Bind () mode
$ ('. Button '). On (' click ', function () {
Alert (' Replace. bind () ');
});
Override. Bind () mode and use additional data and event objects
$ ('. Button '). On (' click ', {User: ' Lee '}, function (e) {
Alert (' Alternative. bind () ' + e.data.user);
});
Override. Bind () mode, and bind multiple events
$ ('. Button '). On (' mouseover mouseout ', function () {
Alert (' Replace. bind () move in and out! ‘);
});
Override. Bind () mode to bind multiple events in an object pattern
$ ('. Button '). On ({
Mouseover:function () {
Alert (' Replace. bind () move in! ‘);
},
Mouseout:function () {
Alert (' Replace. bind () move out! ‘);
}
});
Override. Bind () to block default behavior and cancel bubbling
$ (' form '). On (' Submit ', function () {
return false;
});
Or
$ (' form '). On (' Submit ', false);
Override. Bind () mode to block default behavior
$ (' form '). On (' Submit ', function (e) {
E.preventdefault ();
});
Override. Bind () mode to cancel bubbling
$ (' form '). On (' Submit ', function (e) {
E.stoppropagation ();
});
Override. Unbind () mode, remove event
$ ('. Button '). Off (' click ');
$ ('. Button '). Off (' click ', FN);
$ ('. Button '). Off (' click.abc ');
Replace. Live () and. Delegate (), event delegates
$ (' #box '). On (' click ', '. Button ', function () {
$ (this). Clone (). AppendTo (' #box ');
});
Override. Die () and. Undelegate (), cancel event delegation
$ (' #box '). Off (' click ', '. Button ');
Note: As in the previous approach, event delegation and cancellation event delegates also have various collocation methods, such as extra data,
Namespaces and so on, not here to repeat.
Whether it's. bind () or. On (), the event is not automatically removed after the binding event and needs to pass. Unbind () and. Off ()
To remove them manually. JQuery provides the. One () method, which automatically removes the event after the binding element has finished executing, and can only be touched by the
The event that was sent once.
Similar to. bind () triggers only once
$ ('. Button '). One (' click ', function () {
Alert (' One triggers only once! ‘);
});
Similar to. Delegate () triggers only once
$ (' #box). One (' Click ', ' click ', function () {
Alert (' One triggers only once! ‘);
});

Three. Examples of event delegates:

HTML code:

<div><input id= "A" type= "button" value= "button 1" ><input id= "a" type= "button" value= "button 2" ></div>

jquery Code:

$ (' div '). Click (function (e) {alert (' Event type: ' + E.type + ', Value: ' + $ (e.target). Val ());})

Click "Button 1" to Eject: event Type: Click,value: Button 1.

Note: E.type returns the object's event type, such as Click, Mousedown;e.target returns the JQuery object that triggered the event.

Four. Recommend a JavaScript online test tool, support select jquery Library, can test HTML, CSS, JS code

JavaScript event delegates and jquery event bindings on, off, and one