About the event proxy in JavaScript

　　Today interviewed a company web front-end development post, the front of the questions answered are still work, and asked about yesterday in an interview to do an array of problem solving ideas (on the problem of array de-weight, you can watch me write a few days ago: http://www.cnblogs.com/ Craftsman-gao/p/4766223.html. Fortunately, the previous few days specifically to see this problem, the answer can be easy to deal with AH), because these have been studied before, so the answer is not too difficult. Eventually, however, the interviewer came up with a code question that made me pose. The topic itself is very simple: a UL has 1000 Li, how to give the 1000 Li binding a mouse click event, when the mouse click Alert out of the 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, and efficiency issues. 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 ("Position:" +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;    }
return {x:x, y:y};}

After I finished it again, I felt no need to consider compatibility, event bubbling. Efficiency words, think, also can not think of how to improve, so to the interviewer to see. Interview My husband is also very good, he looked after said: You did not take into account I said the point ah, you so 1000 times the loop add click event Efficiency is very low. And then told me about the use of event bubbling to improve efficiency, that is, event broker (PS: Previously done project has encountered to prevent event bubbling, but the use of event bubbling feature to improve efficiency but still do not know). Listen to the interviewer said the rise of posture, back to the internet after he also looked up, and now he summed up as a record of their own learning process:

Event delegation, also known as event delegation. is a common technique for binding events commonly used in JavaScript. As the name implies, "event broker" is to delegate an event that would otherwise be bound to the parent element, so that the parent element acts as an event listener.

Why do you do this? As is known to all, DOM operations are very performance-intensive, so duplicate event bindings are simply performance killers. The core idea of the event agent is to listen to as many events as possible by minimizing the amount of binding. Program Ape thing, no code to say a J8, the following post code:

varUlitem = document.getElementById ("Ulitem"); Ulitem.onclick=function(e) {e= e | |window.event;//This line and the next line are for compatibility with IE8 and previous versionsvartarget = E.target | |e.srcelement; if(target.tagName.toLowerCase () = = = "Li") {alert (target.innerhtml); Alert ("Location:" +getelementposition (target). x+ "," +getelementposition (target). Y); }}functionGetelementposition (e) {varX=0,y=0;  while(E! =NULL) {x+=E.offsetleft; Y+=E.offsettop; E=e.offsetparent; }return{x:x, y:y};}

Well, now that the code has removed the for loop, improved efficiency, and compatibility, it feels like the answer should be OK. Said above is for a pen test, the following is the idea of academic research to say the event agent:

In traditional event handling, you add or remove event handlers as needed for each element. However, event handlers can lead to memory leaks or performance degradation-the more you use it, the greater the risk. The JavaScript event Proxy is a simple technique by which you can add event handlers to a parent element, thus avoiding the addition of event handlers to multiple child elements. The event agent uses two features that are often ignored in the Javasciprt event: event bubbling and the target element. When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. The target element of any event is the first element, in our example, the button, and it appears as an attribute in our event object. Using the event proxy, we can add an event handler to an element, wait for an event to bubble up from its child elements, and know which element the event is starting from.

Regarding the event agent, today is also the first contact, first write this.

About the event proxy in JavaScript