Brief analysis of event agent in javascript

The main content of this paper is sorted out according to the thinking of solving a series of problems in the interview for a front-end development position of Web in a company not long ago and Shared with everyone.

The topic itself is very simple: 1 thousand li in 1 ul, how to bind 1 thousand li with 1 mouse click event, when the mouse clicks alert gives the content of this li and the position coordinates of li 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>

Consider browser compatibility, event bubbling, efficiency, and more. After reading the question, I wrote down 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 it and reading it again, I feel there is no need to consider compatibility and events bubble up. Efficiency, think about it, can not figure out how to improve, so the interviewer to see. The interviewer was also very nice. He looked at it and said, "You are not considering the point I am talking about. You are inefficient in adding click events for 1000 cycles." Then he told me about using event bubbling to improve efficiency, which is the event agent (ps: I have encountered in previous projects to prevent event bubbling, but I didn't know how to use event bubbling to improve efficiency). After listening to the interviewer, I also looked up 1 time on the Internet after I came back. Now I summarize it again as a record of my learning process:

Event agent (Event Delegation), also known as event delegate. Is a common technique for binding events in JavaScript. As the name implies, an "event broker" delegates an event that needs to be bound to a parent element, which ACTS as an event listener.
Why would you do that? DOM operations are known to be 10 percent performance-intensive, so repetitive event binding is a performance killer. The core idea of event broker is to listen for as many events as possible with as few bindings as possible. Program ape thing, no code to say J8, the following code posted:

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
 e = e || window.event;// this 1 Under the line and 1 Rows are for compatibility IE8 And previous versions 
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() === "li"){
 alert(target.innerHTML);
 alert(" Location: "+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, now that the for loop has been removed from the code, the efficiency is improved, and the compatibility aspect of the code is improved, I think the answer should be ok. The above mentioned is for a pen test, the following is in the spirit of academic research on the idea of event agent:

In traditional event handling, you add or remove event handlers for each element as needed. However, event handlers can lead to memory leaks or performance degradation - the more you use them, the greater the risk. JavaScript event broker is a simple technique that allows you to add event handlers to one parent element, thus avoiding the need to add event handlers to multiple child elements. The event broker USES two features that are often overlooked in JavaSciprt events: event bubbles and target elements. When an event is triggered on an element, such as a mouse click on a button, the same event will be triggered on all ancestor elements of that element. This process is called event bubbling; This event bubbles from the original element 1 to the top of the DOM tree. The target element of any 1 event is the original element, in our case the button, and it appears as an attribute in our event object. Using an event broker, 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 started with.

About the event agent, today is also the first contact, let me write this, I hope to help you with your study.