Discussion on the event agent in JavaScript _javascript skills

Events are always one of the most powerful objects in JavaScript. JavaScript provides AddEventListener and attachevent two methods for binding events for DOM nodes, and jquery is further encapsulated to provide a BIND method compatible with each browser. For now, this traditional event-binding approach has the following drawbacks:

1. You may need to bind a lot of eventhander.

If a table on a page has 100 rows, you must now bind a click event for each row. Then you have to bind 100 EventHandler, which is a huge burden on page performance because you need to create more memory to store these handler.

2. The DOM node that the event could not bind and then join.

If the code in the page is as follows:

Copy Code code as follows:

$ ("#dv"). Bind (' click ', function () {alert (' Test ');});
$ (body). Append (' <div id= dv ' >test</div> ')

After adding the DIV is unable to trigger the click event.

To address these two issues, JavaScript introduces the event proxy. First, we understand the bubbling mechanism in JS.

Virtually all browsers support event bubbling. When an event is triggered on a DOM node, the event is passed up all the time to the root node of the document. Now that all of the node's events are eventually passed to the document root node, if we bind the event directly to the document root node (the Documents node), and then event.target to determine which node triggered the event, does it reduce the number of EventHandler bindings?

The live method in jquery is officially based on this principle, so let's implement a live simple version:

Copy Code code as follows:

$.fn.mylive=function (EVENTTYPE,FN) {
var that=this.selector;
$ (document). Bind (Eventtype,function (event) {
var match=$ (Event.target). closest (that)
if (match.length!== 0) {
Fn.apply ($ (event.target), [Event]);
}
})
}

$ ("#tb TD"). Mylive (' click ', Function (event) {
alert (Event.target.innerHTML);
});

var tb= ' <table id= ' TB ' >
<tr> \
<td>the-Column</td>\
<td>the Second column</td>\
<td>the Third Column</td>\
</tr>\
</table> ';
$ ("Body"). Append (TB);

In the live method, the event is bound on the document node, $ (event.target). closest (that) to match the element that really triggers the event. In the demo, we have to each after joining the TD are bound click event, clicking the different TD, we found will pop-up their corresponding text of the prompt box.

The live method compensates for two deficiencies in the traditional event-binding approach mentioned earlier. But the live approach still has its drawbacks. Look at this code:

Copy Code code as follows:

$ ("#tb TD"). Mylive (' click ', Function (event) {
alert (Event.target.innerHTML);
});

It first traverses the entire document based on the jquery selector, finds all the #tb TD elements, and stores them as objects. However, in the live implementation method, these objects are not exploited, but simply match "#td TD" as a string to the event source. This has greatly increased the amount of unnecessary consumption.

So is there any way to improve the situation? jquery provides the delegate proxy method, which supports binding events to specified elements, not just on the document. To understand its rationale, let's implement a delegate simple version:

Copy Code code as follows:

$ (body). Append (' <div id= dv ' ></div> ');

$.fn.mydelegate=function (SELECTOR,EVENTTYPE,FN) {
$ (this). Bind (Eventtype,function (event) {
var match=$ (Event.target). closest (selector);
if (match.length!== 0) {
Fn.apply ($ (event.target), [Event]);
}
});
}

$ ("#dv"). MyDelegate (' TD ', ' click ', Function (event) {
alert (Event.target.innerHTML);
});

var tb= ' <table id= ' TB ' >
<tr> \
<td>the-Column</td>\
<td>the Second column</td>\
<td>the Third Column</td>\
</tr>\
</table> ';
$ ("DV"). Append (TB);

The Mydeletage method does not need to get all of the TD objects, only to get the div object that binds the event. This is superior to the live method in execution efficiency.

Here is just a good idea to let you know the principle of event proxies, the live and delegate implementations in jquery are much more complex.