A brief analysis of event proxy in javascript

The main content of this article is based on a array deduplication problem solving idea that I did during a recent interview for a company’s Web front-end development position, and I would like to share it with you.

The question itself is very simple: there are one thousand li's in a ul. How to bind a mouse click event to these one thousand li's. When the mouse is clicked, the content of the li and the position coordinate xy of the li will be alerted. ,

123...1000

You need to consider browser compatibility, event bubbling, efficiency and other issues. After seeing the question, 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("内容："+this.innerHTML);
 alert("位置："+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};
}

Interview results: After I finished writing, I read it again and felt that there is no need to consider compatibility. Events are bubbling up. As for efficiency, after thinking about it, I couldn’t think of how to improve it, so I just showed it to the interviewer. The interviewer was also very nice. After reading it, he said: You have not considered the key points I mentioned. It is very inefficient for you to add click events in a loop 1,000 times. Then he told me about using the event bubbling feature to improve efficiency, that is, event proxy (ps: I have encountered times when I had to prevent event bubbling when doing projects in the past, but using the event bubbling feature to improve efficiency has not been done at all. Know). After listening to what the interviewer said, I got excited. After I came back, I also checked on the Internet. Now I will summarize it as a record of my learning process:

Event Delegation , also called event delegation. is a common technique for binding events in JavaScript. As the name suggests, "event proxy" delegates the events that originally need to be bound to the parent element, allowing the parent element to take on the role of event listener.

Why do you do this? As we all know, DOM operations are very performance-consuming, so repeated event binding is simply a performance killer. The core idea of ​​the event proxy is to monitor as many events as possible through as few bindings as possible. For programmers, if there is no code, let me just say J8. The code is posted below:

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
 e = e || window.event;//这一行和下一行是为了兼容IE8以及之前版本
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() === "li"){
 alert(target.innerHTML);
 alert("位置为："+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 the code has removed the for loop, which improves efficiency and has compatibility. Regarding the treatment of sex, I feel like this answer should be adequate. What I said above is just for a written test question. Let’s talk about it in the light of academic research. Event agent:

In traditional event processing, you Add or remove event handlers for each element as needed. However, event handlers will have the potential to cause memory leaks or performance degradation - the risk increases the more you use them. JavaScript event delegation is a simple technique that allows you to add event handlers to a parent element, thus avoiding the need to add event handlers to multiple child elements. The event proxy uses two features that are often overlooked in JavaScript events: event bubbling 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; the event bubbles up 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. Using event proxies, 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 started from.

Regarding the event proxy, today is also my first contact with it, so I will write this first. I hope it will be helpful to everyone’s learning. For more related tutorials, please visit JavaScript Video Tutorial!