In depth analysis of the Javascript event agent

For a long time, there was a feeling that there was no difference between an event happening and an event agent.

Recently, looked again 1, the feeling difference is really not big! So let's see what that means.

To figure out what an event agent is, we need to figure out what an agent is.

From the business point of view, the agent is: I have goods, you have no goods, but The ya I have no time, no energy to sell all, and you 1 day free egg pain, only time left. So, I entrust you to buy for me, then elder brother gives you commission. And in the process, you actually have the goods.

OK, how do you literally understand the meaning of the term event agent? We'll talk about that later.

Let's start with a real, novice example of binding onclik events

How would I add onlick to every li tag if I did what I did before? Nonsense, if I were you, I'd be rude.
Loop through each li, then bind all onlick.

So my code should look like this:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<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 to be all right. Although, some articles say such very consumption performance, but, my ya computer good, Lao Tze tube your performance, can't be too serious.

2 Suddenly one day, I found that the new li added via 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 doesn't bind to my onlick. Why?
Oh, it turns out that my original li didn't happen at all at the same time as the li I generated later, and the event was added to the existing li before the new li element was created. Okay, that's annoying.

How do you break it?

Then, again good (no) qi (nai) read some articles, there is a thing called event agent can be used. I'll give it a try! So I rewrote part of the code like this:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  // Compatible with the processing 
  var target = ev.target || ev.srcElement;
　　// find li The element 
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

As a result, clicking the new li actually triggers the fn function as well. Well, as a body driven by curiosity, how could I not understand? It is better to be practical and understand the mystery.

So, look at the event agent's data.

First, know what event bubbles are: when an event on an element is triggered, say by 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, to return to the question "How do you literally understand the meaning of the term event agent", who represents the event? Or who does the event represent?
For the example in this article, take a look at the changed code. I have bound the onlick event to the ul tag instead of the li tag. So, when I click on any one of the li tags (either dynamically generated or pre-existing), the event is like a bubble 1, popping up and popping up. Normally, ul would bind to onclick, and body would bind to onclick, meaning it would bubble up to the most root-level element. But if I bind onlick to ul, then ul will intercept the bubble and the event will stop rising, unable to reach the body tag.

Then, var target = ev.target || ev.srcElement. This sentence basically tells me who I ordered and who is target. If the target is just right for the li tag if (target.nodeName.toLowerCase () == 'li'), then execute the fn function.

Finally, I proudly answered the question: table represented the onlick event!

Recall step 1 of the event agent

The parent element binds the event
The parent element knows who the actual target of the event is
We are going to judge the target, and if it is the element we need, then a callback function occurs (so learn how to use the selector well)

5. To sum up, event agent has two advantages

The performance is not insignificant to optimize
Dynamically added elements can also bind events

6 One thing to notice is that

The above is for the native js event binding if you are using jquery. And changed the code to look like this:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  // Compatible with the processing 
  var target = ev.target || ev.srcElement;
　　// find li The element 
  if (target.nodeName.toLowerCase() == 'li') {
     //li Added events 
     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();
});

So 1, the newly added li tag, can also bind click, is not very convenient, very simple, is not the feeling of learning js egg use.

Haha, it's normal to think so, I used to think so, but after doing a few things, I found that jquery was really not enough! But basically enough!

Although, the great gods all say to learn js, but I still think you can learn jquery first, then learn js, the effect is also ok.