Analyze the event proxy in javascript and analyze javascript events

Analyze the event proxy in javascript and analyze javascript events

The main content of this article is based on a recent interview with a company for a Web Front-end development position.How to solve array deduplication ProblemsAnd share it with you.

The question itself is very simple: there are one thousand li in a ul, how to bind a mouse click event to the one thousand li, when the mouse clicks, alert will output the li content and the li position coordinate 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>

Browser compatibility, event bubbling, and efficiency must be considered. After seeing the question, I wrote the following answer 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 results:After writing and reading it again, I feel that it is unnecessary to consider compatibility and event bubbling. If you think about efficiency, you can't figure out how to improve it, so you can show it to the interviewer. The interviewer is also quite good. After reading it, he said: You didn't take into account the key points I said. The efficiency of adding click events in 1000 cycles is very low. Then I talked about how to use the event bubbling feature to improve efficiency, that is, the event proxy (ps: when a project was previously created to block event bubbling, however, we do not know how to use event bubbling to improve efficiency ). After hearing what the interviewer said, I went online and checked my posture. Now I want to summarize the process of recording my learning:

Event Delegation is also called Event Delegate.It is a common technique for binding events in JavaScript. As the name suggests, "event proxy" delegates events that need to be bound to the parent element, so that the parent element can assume the role of event listening.
Why? As we all know, DOM operations consume a lot of performance, so repeated event binding is simply a performance killer. The core idea of event proxy is to listen to as many events as possible by binding as few events as possible. The program has no code to say J8, and the following code is posted:

Var ulItem = document. getElementById ("ulItem"); ulItem. onclick = function (e) {e = e | window. event; // this line and the next line are used to be compatible with IE8 and earlier versions of var target = e.tar get | 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 the Code removes the for loop, which improves efficiency and compatibility. I feel like this answer is okay. The above is just for a pen question. Next I will talk about it in the spirit of academic research.Event Proxy:

In traditional event processing, you add or delete event processors for each element as needed. However, the event processor may cause memory leakage or performance degradation-The more you use, the greater the risk. JavaScript event proxy is a simple technique in which you can add an event processor to a parent element, this avoids adding the event processor to multiple child-level elements. The event proxy uses two features that are often ignored in the JavaSciprt event: Event bubbles and target elements. When an event on an element is triggered, for example, if you click a button, the same event will be triggered in all the ancestor elements of that element. This process is called event bubbling, which starts from the original element until the top layer of the DOM tree. The target element of any event is the first element. In our example, it is also a button, and it appears as an attribute in our event object. With event proxy, we can add the event processor to an element, wait for an event to bubble up from its child element, and know the element from which the event starts.

This is also the first time we have come into contact with event agents. I hope this will be helpful for everyone's learning.