Introduction to event registration issues caused by js closure

Introduction to event registration issues caused by js closure_Basic knowledge

WBOY

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

Original

1160 people have browsed it

Background: I read a few articles about js scope chains and closures in my spare time, and accidentally saw a problem I encountered before, which is in the for loop Register event driver for dom node, 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

Conclusion: The knowledge of scope chain and closure in js is very important. Although I did not talk about it here, I am actually afraid that it will not be explained clearly and it will mislead everyone

The above introduction to event registration issues caused by js closures is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.