js closure_javascript 기술로 인한 이벤트 등록 문제 분석-JS 튜토리얼-php.cn

js closure_javascript 기술로 인한 이벤트 등록 문제 분석

WBOY

풀어 주다： 2016-05-16 15:07:52

원래의

1299명이 탐색했습니다.

배경: 여가 시간에 js 스코프 체인 및 클로저에 대한 몇 가지 기사를 읽었는데 우연히 이전에 발생한 문제를 보았습니다. 이는 for 루프에 dom 노드용 이벤트 드라이버를 등록하는 것입니다. 자세한 내용은 아래 코드를 참조하세요.

<!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>

로그인 후 복사

일반적인 생각에 따르면 3개의 버튼을 클릭하면 각각 "anchor1", "anchor2" 및 "anchor3"이 표시되는 결과가 나와야 합니다. 기간 초반에는 그렇게 생각했지만 결과는 무엇이든 마찬가지입니다. 버튼을 클릭하면 "anchor4"라는 메시지가 표시됩니다.

이게 왜요? 걱정하지 마세요. js 스코프 체인과 클로저에 대한 지식이 포함되어 있으므로 여기서는 자세히 소개하지 않겠습니다.

먼저 Anchor.onclick이 무엇인지 살펴보겠습니다. 이건 DOM 레벨 0 이벤트 핸들러입니다. 말도 안 돼요. 블로거는 사이코패스인가요? *************** 제가 하고 싶은 말은 이 앵커입니다. 🎜 >

은 var name="Xiao Ming"과 같은 이벤트 핸들러의 선언입니다. 이것이 선언되었지만 아직 실행되지 않았습니다. 이것이 핵심입니다. 위의 js 코드를 살펴보겠습니다. 🎜>

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;

로그인 후 복사

i==2일 때 디버거를 사용하여 루프를 중지한 다음 콘솔로 이동하여 #anchor1 및 #anchor2의 클릭 이벤트를 수동으로 트리거하면 콘솔에 "anchor2"가 인쇄됩니다.