In-depth analysis of basic knowledge about Javascript event proxies

JavaScript events are the foundation of interaction between all webpages. In traditional event processing, the event processor may cause memory leakage or performance degradation. JavaScript event proxy is a simple technique, you can add an event processor to a parent element to avoid adding the event processor to multiple child elements. For a long time, there has always been no difference between events and event proxies.

Recently, I looked at it again, and it seems that the difference is really not big! Let's see how it works.

To understand what an event proxy is, you must first understand what it is.

From a commercial point of view, the agent is: I have goods, you have no goods, but I have no time or energy to sell them all, and you have a day of leisure, and there is only time left. So I entrust you to buy it for me, and my brother will give you a commission. In this process, you actually have the goods.

OK. How can I understand the meaning of event proxy literally? Later.

First, let's take a look at an example of a newbie binding an onclik event.

How can I add onlick to each li tag according to the previous one? Nonsense. If it were me, it would be simple and rude.
Loop every li and then bind all onlick.

So my code should be like this:

 
 
  
  
  
001
  
  
  
002
  
  
  
003
 
 
《script》  var thl= document.getElementById('thl');  var aLi = thl.getElementsByTagName('li');  for (var i = 0; i < aLi.length; i++) {  　　aLi[i].onclick = fn;  }    function fn (){   console.log("maomaoliang");  }《script》

It seems that there is no problem. Although some articles say this consumes a lot of performance, I have a good computer, and I can't take your performance seriously.

2. One day, I found that the new li added through js was not bound to onlcik.

var node=document.createElement("li");var textnode=document.createTextNode("maomaoliang");node.appendChild(textnode);document.getElementById("ul1").appendChild(node);

Then, click maomaoliang and it is not bound to my onlick. Why?
Oh, it turns out that the li generated after my original li and I did not happen at the same time. Before creating the li element, I added an event to the existing li element. Okay, so annoying.

3. How can this problem be solved?

Then, I read some articles in Hao (Wu) Qi (NAI). It turns out that something called event proxy can be used. Let me try it! So I modified some code, like this:

Var thl = document. getElementById ('thl'); thl. onclick = function (ev) {ev = ev | event; // compatible with var target = ev.tar get | ev. srcElement; // locate the li element if (target. nodeName. toLowerCase () = 'lil') {fn () ;}}; function fn () {console. log ("maomaoliang ");}

As a result, clicking the new li triggers the fn function. Well, as a body driven by curiosity, how can I not solve it? We still need to be steadfast in understanding the mysteries of this.

So I read the Event Agent information.

First, you need to know what is event bubbling: when an event on an element is triggered, for example, clicking a button with the mouse, the same event will be triggered in all ancestor elements of that element. This process is called event bubbling.

Then, let's go back to the previous question: "How can we literally understand the meaning of event proxy?" Who acted on the event? Or who is the event proxy?
Taking the example in this article, let's look at the modified code. I bound the onlick event to the ul tag instead of the li tag. So when I click any li tag (either dynamically generated or previously generated), this event is like a bubble. Under normal circumstances, ul will also bind the onclick, and the body will also be bound to The onclick, that is, it will bubble to the element at the root layer. But here I bound the onlick to ul, then ul will intercept the bubble, and the event will stop rising and cannot reach the body tag.

Next, var target = ev.tar get | ev. srcElement; this statement tells me who I actually click and who is the target. If the target is just the li Tag if (target. nodeName. toLowerCase () = 'lil'), execute the fn function.

Finally, I answered the question proudly: table acts as the proxy for the onlick event!

4. Recall the steps of event proxy

Parent element binding event
The parent element knows who the event actually happens.
We need to judge the target. If it is an element we need, a callback function will occur (so we must learn how to use the selector)

Conclusion 5: Event proxy benefits

Performance has been greatly optimized
Events can also be bound to dynamically added elements.

Note that

The above is for native js event binding, if you use jquery. The code is changed to the following:

/* Var thl = document. getElementById ('ul1'); thl. onclick = function (ev) {ev = ev | event; // compatible with var target = ev.tar get | ev. srcElement; // locate the li element if (target. nodeName. toLowerCase () = 'lil') {// The Event fn () ;}}; */var node = document. createElement ("li"); var textnode = document. createTextNode ("maomaoliang"); node. appendChild (textnode); document. getElementById ("ul1 "). appendChild (node); function fn () {console. log ("maomaoliang") ;}$ ("# ul1 "). click (function () {fn ();});

In this way, the newly added li tag can also be used to bind a click. Is it very convenient and simple? Is it useless to learn JavaScript.

Haha, it's normal to think like this. I used to think like this. But after doing something, I found that jquery is not enough! But it is basically enough!

Even though I want to learn JavaScript, I still think that jquery can be learned first, and js can be learned later.