Preliminary Exploration of event proxy in javascript

Events are always one of the most powerful objects in javascript. Javascript provides the addEventListener and attachEvent methods to bind events to DOM nodes. jquery further encapsulates events and provides bind methods compatible with various browsers. Now, this traditional event binding method has the following shortcomings:

1. You may need to bind many EventHander instances.

If a table on the page contains 100 rows, a click event must be bound to each row. Therefore, you must bind 100 EventHandler, which has a great burden on page performance because you need to create more memory to store these Handler.

2. the DOM node added after the event cannot be bound.

Assume that the Code on the page is as follows:
Copy codeThe Code is as follows:
$ ("# Dv"). bind ('click', function () {alert ('test ');});
$ (Body). append ('<div id = "dv"> test </div> ')

The added div cannot trigger the click event.

To solve these two problems, javascript introduces event proxy ). First, let's take a look at the bubble mechanism in js.

Basically all browsers support event bubbling. When an event is triggered on a DOM node, the event is passed up until the root node of the document. Except get to determine which node triggers the event. Does it reduce the number of EventHandler bindings?

The live method in jquery is implemented based on this principle. Below we will implement a simple live version:
Copy codeThe Code is as follows:
$. Fn. mylive = function (eventType, fn ){
Var that = this. selector;
$ (Document). bind (eventType, function (event ){
Var matchpolic((event.tar get). closest (that)
If (match. length! = 0 ){
Fn.apply(((event.tar get), [event]);
}
})
}

$ ("# Tb td"). mylive ('click', function (event ){
Alert(event.tar get. innerHTML );
});

Var tb = '<table id = "tb"> \
<Tr> \
<Td> the first column </td> \
<Td> the second column </td> \
<Td> the third column </td> \
</Tr> \
</Table> ';
$ ("Body"). append (tb );

In liveevents, the event is bound to the documentnode, and events (event.tar get). closest (that) matches the elements that actually trigger the event. In the demo, we bound a click event for each added td. click different td, and we will see a prompt box for their corresponding Text.

The live method makes up for two shortcomings of the traditional event binding method mentioned above. However, the live method still has its shortcomings. Look at the Code:
Copy codeThe Code is as follows:
$ ("# Tb td"). mylive ('click', function (event ){
Alert(event.tar get. 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 used, but only "# td" is used as a string to match with the event source. This greatly increases unnecessary consumption.

Is there a way to improve this situation? Jquery provides the delegate proxy method. It supports binding events to specified elements, not just documents. After learning about its principles, let's implement a simple delegate version:
Copy codeThe Code is as follows:
$ (Body). append ('<div id = "dv"> </div> ');

$. Fn. mydelegate = function (selector, eventType, fn ){
$ (This). bind (eventType, function (event ){
Var matchpolic((event.tar get). closest (selector );
If (match. length! = 0 ){
Fn.apply(((event.tar get), [event]);
}
});
}

$ ("# Dv"). mydelegate ('td ', 'click', function (event ){
Alert(event.tar get. innerHTML );
});

Var tb = '<table id = "tb"> \
<Tr> \
<Td> the first column </td> \
<Td> the second column </td> \
<Td> the third column </td> \
</Tr> \
</Table> ';
$ ("Dv"). append (tb );

The mydeletage method does not need to obtain all td objects, but only the div objects bound to events. This is superior to the live method in execution efficiency.

Here, we only play a role in attracting others to understand the principles of event proxy. The live and delegate implementations in jquery are much more complicated.