Event delegates or event proxies in JS

One, overview

JavaScript Advanced Programming: Event Delegation is the use of event bubbling, specifying only one event handler, you can manage all events of a certain type.

To take an online bull talk about the event commissioned by the example: to express the explanation, three colleagues are expected to receive the courier in Monday. For the Signature Express, there are two ways: one is three people at the door of the company and other courier, the second is entrusted to the front desk mm for sign. In reality, most of US use commissioned programs (the company will not tolerate so many employees standing at the door to wait for courier). The front desk mm received the courier, she will determine who the recipient, and then according to the recipient's request for sign, or even on behalf of payment. This solution also has an advantage, that is, even if the company's new employees (regardless of how much), the front desk mm will be sent to the new staff after The courier to verify and sign on behalf of. That is, both the existing DOM node and the newly added DOM node in the program are events.

Two, the principle

　　Event delegates are implemented using the bubbling principle of events. Event bubbling definition: The event starts at the deepest node and then propagates the event up and down.

Example: A node tree, Div>ul>li>a, when we add a click event to tag A, when we click on the a tag, the event will be executed as if it were bubbling out of the a>li>ul>div layer. So if we bind a click event to the outermost div, when we click on UL, Li, a in the Div, it will bubble to the Div, triggering the Click event on the outermost div. This is the event delegate, which delegates the parent tag to execute the event on its behalf.

Third, to achieve

<ulID= "UL1">    <Li>1</Li>    <Li>2</Li>    <Li>3</Li>    <Li>4</Li></ul>

Use event delegate to implement the content of Li when you click Li. The event object provides a property called Target, which can return the destination node for events. That is, target can represent the DOM for the current event operation, but not the actual DOM. This place has a browser-compatible issue, which is standard browser with Ev.target,ie browser with Event.srcelement. At this point we can use Target.nodename to get the tag name. This place has a small pit, the return of Target.nodename is capitalized, we can convert it to lowercase in the comparison. The following code is directly affixed

function () {  var ulobj = document.getElementById ("UL1");   function (EV) {    var ev = EV | | window.event;
var target = Ev.target | | Ev.srcelement;
if (target.nodeName.toLowerCase () = = ' Li ') {
alert (target.innerhtml);
}
}}

Four, the benefits of using event delegation

One of the main ways to optimize performance is to reduce the number of DOM operations. Using event delegates does not need to traverse the child nodes of the element at all, simply by adding an event to the parent element, simply interacting with the DOM once, and then putting all the operations into the JS program, which can greatly reduce the number of interactions with the DOM and improve performance. Also, reducing the number of functions can reduce memory usage.

Event delegates or event proxies in JS