On the event agent _javascript skills in JavaScript

The main content of this article is based on the recent interview of a company's Web front-end development post, an interview to do an array to solve the problem of solving ideas to organize, to share with you.

The topic itself is very simple: a UL has 1000 Li, how to give these 1000 li binding a mouse click event, when the mouse clicks alert out this Li's content and Li's position coordinates xy,

<ul id= "Ulitem" >
 <li id= "Li1" >1</li>
 <li id= "Li2" >2</li>
 <li id= "Li3" >3</li> ...
 <li id= "li1000" >1000</li>
</ul>

You need to take into account browser compatibility, event bubbling, efficiency, and so on. After seeing the problem, I wrote the following answer directly on the paper:

var Ulitem = document.getElementById ("Ulitem");
var lis = document.getelementsbytagname ("li");
for (var i=0 i<lis.length; i++) {
 Lis[i].onclick = function () {
 alert ("Content:" +this.innerhtml);
 Alert ("Location:" +getelementposition (this). x+ "," +getelementposition (this). Y;
 }
}
function Getelementposition (e) {
 var x=0,y=0;
 while (e!= null) {
 x + = E.offsetleft;
 Y + + e.offsettop;
 e = e.offsetparent;
 } <br> return {x:x, y:y};
}

Interview Result: after writing and seeing again feel no need to consider compatibility, event bubbling ah. Efficiency, think about it, also can not think how to upgrade, so to the interviewer to see. Interview husband is also very good, he read and said: You did not take into account my point ah, you so 1000 times the cycle of adding click event Efficiency is very low. And then you told me. Use event bubbling to improve efficiency, which is when event agents (PS: Previously done projects have encountered the need to prevent event bubbling, but the use of event bubbling characteristics to improve efficiency is not yet known). After listening to the interviewer to speak of the rise of posture, back to their own online check, and now summed up as a record of their own learning process it:

Event delegation, also called an event delegate. is a common technique for binding events commonly used in JavaScript. As the name implies, "event Agent" is to delegate the original need to bind the event to the parent element, so that the parent element to assume the role of event monitoring.
Why did you do that? As we all know, DOM operations are very performance-intensive, so repetitive event bindings are simply a performance killer. The core idea of the event agent is to monitor as many events as possible by binding as few as we can. Program Ape thing, no code to say a J8, the following post code:

var Ulitem = document.getElementById ("Ulitem");
Ulitem.onclick = function (e) {
 e = e | | | window.event;//this line and the next line are for compatibility IE8 and previous versions of
 var target = E.target | | e.srcelement ;
 if (target.tagName.toLowerCase () = = = "Li") {
 alert (target.innerhtml);
 Alert ("Location is:" +getelementposition (target). x+ ", +getelementposition (target). y);
 }
}
function Getelementposition (e) {
 var x=0,y=0;
 while (e!= null) {
 x + = E.offsetleft;
 Y + + e.offsettop;
 e = e.offsetparent;
 }
return {x:x, y:y};
}

Well, the code now removes the for loop, improves efficiency, and has compatibility aspects, and it feels like the answer is OK. Above is to say that is for a pen test, the following is the spirit of academic research to say the event Agent:

In traditional event handling, you add or remove event handlers for each element as needed. However, event handlers can cause memory leaks or performance degradation-the more you use it, the greater the risk. The JavaScript event agent is a simple technique by which you can add an event handler to a parent element, thus avoiding the addition of an event handler to multiple child elements. The event agent uses two features that are often ignored in JAVASCIPRT events: event bubbling and target elements. When an event on an element is triggered, such as when a mouse clicks on a button, the same event is triggered in all ancestor elements of that element. This process is called event bubbling; This event bubbles from the original element to the top of the DOM tree. The target element of any event is the first element, in our case the button, and it appears as a property in our event object. With the event agent, we can add an event handler to an element, wait for an event to bubble up from its child element, and know which element the event starts with.

About the incident agent, today is also the first contact, the first written to this bar, I hope to help you learn.