Analyze event registration issues caused by js closure_javascript skills-JS Tutorial-php.cn

Analyze event registration issues caused by js closure_javascript skills

WBOY

Release： 2016-05-16 15:07:52

Original

1308 people have browsed it

Background: I read a few articles about js scope chain and closure in my spare time, and accidentally saw a problem I encountered before, which is to register event driver for dom node in for loop , see the code below for details:

<!DOCTYPE html>
<html>
 <head>
 <title>js闭包</title>
 <meta charset="utf-8" />
 </head>
 <body>
 <button id="anchor1">1</button>
 <button id="anchor2">2</button>
 <button id="anchor3">3</button>
 <script type="text/javascript" src="jquery-1.12.1.js"></script>
 <script type="text/javascript">
  function pageLoad(){
  for (var i = 1; i <=3; i++) { 
   var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
  } 
  } 
  window.onload = pageLoad; 
 </script>
 </body>
</html>

Copy after login

According to normal thinking, the result should be that clicking 3 buttons will prompt "anchor1", "anchor2", and "anchor3" respectively. I thought so at the beginning of the period, but the result is that no matter which button is clicked, "anchor4" will be prompted. .

Why is this? Don't worry, let's analyze it slowly. It includes the knowledge of js scope chain and closure, so I won't introduce it in detail here.

First let’s look at anchor.onclick. What is this? This is a DOM level 0 event handler. Nonsense. I also know. Is the blogger a psychopath? *************** Stop arguing. What I want to say is this anchor.onclick

is a declaration of an event handler, just like var name="Xiao Ming". This is declared, but it has not been executed yet. This is the key. Let's modify the above js code and take a look:

function pageLoad(){
  for (var i = 1; i <=3; i++) { 
  var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
   if(i==2){
   debugger;//我们在这里debugger一下，然后在控制台手动触发#anchor1和#anchor2的点击事件
   }
  } 
 } 
 window.onload = pageLoad;

Copy after login

See, we use the debugger to stop the loop when i==2, and then go to the console to manually trigger the click events of #anchor1 and #anchor2, and the console prints "anchor2".

The whole logic is roughly like this: anchor.onclick always saves the reference of i, and i keeps changing during the loop, from i=1 to i=4; although during the loop, anchor.onclick once Saved (note the word "once"),

There are three cases of 1, 2, and 3, but i eventually becomes 4, so no matter which button is clicked, "anchor4" will be output

The above is the entire content of this article, I hope it will be helpful to everyone’s study.