JS closure caused by Event Registration problem Introduction _ Basic knowledge

Source: Internet
Author: User
Tags closure

background: leisure time read a few about JS scope chain and closure of the article, and occasionally saw a problem encountered before, is in the For loop for the DOM node registration event driver, see the following code:

<! DOCTYPE html>

According to the normal idea, the result should be to click 3 buttons respectively to hint "Anchor1", "Anchor2", "Anchor3"; at the beginning of the period I think so, but the result is no matter what button clicked, will prompt "Anchor4".

What is this for? Don't worry, wait for us to analyze, here the bread contains JS scope chain and closure of knowledge, here I do not detail.

First we look at this anchor.onclick, what is this? This is the DOM0 level event handler Ah, nonsense, I also know, Bo Lord is snake Essence disease? ************* Don't quarrel, I want to say is this Anchor.onclick

is an event handler declaration, just like the Var name= "Xiaoming", this is the declaration, but has not been implemented, this is the key, we will be the above JS code modified to look at:

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;//we debugger here and then manually trigger the #anchor1 and #anchor2 click events
 } in the console Window.onload = pageload;

See, we let the loop stop at i==2 by debugger, and then go to the console to manually trigger #anchor1 and #anchor2 Click events, resulting in the console printing "Anchor2."

The whole logic is roughly like this: Anchor.onclick has been holding the reference to I, I have been changing in the cycle, from I=1 to i=4, although in the process of circulation, Anchor.onclick has been saved (note "Once" two words),

1,2,3 these three kinds of cases, but I finally turned into 4, so that no matter which button you clicked, you would output "Anchor4"

conclusion:JS in the scope of the chain and closure of the knowledge is very important, although this is not said, in fact, is afraid to speak do not understand, but misled everyone

The above JS closure caused by the event registration problem is small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.