A brief discussion on event binding in JavaScript_javascript skills

In fact, there is no new knowledge point. It is just for the convenience of other friends in need. It is also an accumulation for myself, so it can only be regarded as chatting about JavaScript. Veterans can drift by as much as they want.
Before getting into the topic, let’s ask a question to warm up.
Now there is the following HTML structure:

Copy the code The code is as follows:

and the following JavaScript code:

Copy code The code is as follows:

var wrap = document.getElementById('wrap'),
inputs = wrap.getElementsByTagName( 'input');

for (var i = 0, l = inputs.length; i < l; i ) {
inputs[i].onclick = function () {
alert (i);
}
}

Excuse me, what is the result of this execution?
/*****************************Separating line********************** **********/
If your answer is "When the button is clicked, alert the index value i of the current button", then you have fallen into my trap. You might as well try it, no matter which button you click, it will alert(5).

Why is this seemingly natural result different from the actual situation? In fact, it is easy to understand.
Because onclick is only event binding, not execution. When we execute the onclick event, i at this time is already the value after the loop. Looking at it this way, it is not enough for each button to alert(5) Strange.

So, how do we implement "when the button is clicked, alert the index value i of the current button"? Here we need to use a concept "closure" that is a hidden mystery in JavaScript. We can rewrite the above JS using closures to save the i value in the for loop in memory. The code is as follows:

Copy code The code is as follows:

var wrap = document.getElementById('wrap'),
inputs = wrap.getElementsByTagName('input');

for (var i = 0, l = inputs.length; i < l; i ) {
(function (cur) {
inputs[cur].onclick = function () {
alert (cur);
} }
})(i)
}

Try the effect again? It is true that the corresponding index value can be alerted, but so far it is just an appetizer, and the main topic has just begun!
In the above method, we bind events to the button through loop closures. We know that functions in JavaScript are also objects, and objects will occupy memory. In the current example, there are only 5 buttons. Maybe you will think Such performance overhead is negligible, but if we have 50 or even 500 buttons, IE will already cry. When there are more other performance risks concurrently, all browsers will cry.

Going back to the example just now, we can use the "event delegation" method to solve this performance problem that may be caused by the increase in bound events as the buttons increase. The principle is very simple. Using Javascript's event bubbling, we can move the event binding from buttons to their parent elements. No matter how many buttons there are, they only have one common parent element, so we only need to bind them once. events on it.
The code is as follows:

Copy the codeThe code is as follows:

var wrap = document.getElementById('wrap'),
inputs = wrap.getElementsByTagName('input');

wrap.onclick = function (ev) {
var ev = ev || window.event,
target = ev.target || ev.srcElement;
for (var i = 0, l = inputs.length; i < l; i ) {
            if (inputs[i] === target) {                                                                                                                                                                                                                                 Dig a little deeper and have some dessert.
In addition to the performance advantages of event delegation over closure event binding, event delegation does not need to take into account the number of child elements (i.e. the elements to which events are bound). For example, after we bind the onclick event,
adds a button:

Copy the code
The code is as follows:

var newInput = document.createElement('input'); newInput.setAttribute('type', 'button'); newInput.setAttribute('value', 'Button six '); wrap.appendChild(newInput);

The closure method and event delegation method of this code are also added at the end. We can see that the event binding implemented by the closure Clicking "Button Six" has no effect, but clicking "Button Six" through event binding implemented in the event delegate will cause an alert. On the contrary, if we want to delete a button, the closure method will still save the onclick event of the deleted button in memory (unless it is manually set to null), and the event delegate will not cause unnecessary burden on the memory. For this reason, We should also make more use of event delegation to bind multiple elements at the same level.