javascript - 为什么 Javascript addEventListener 会更改对象指针的范围？

Question

我在使用一段相当简单的普通 Javascript 时遇到了一些麻烦。它所做的就是通过标签名称获取所有 p 元素，并将一个事件处理程序附加到每个元素，该事件处理程序调用一个将颜色更改为红色的函数。

回调函数外el指的是正确的元素，1-6。但在循环内部，它总是引用最后一个，尽管 JavaScript 具有词法变量作用域性质。为什么会这样？可以采取什么措施来实现预期的行为？

fiddle :https://jsfiddle.net/7j4bg68g/

<p>1 This is a test.</p>
<p>2 This is a test.</p>
<p>3 This is a test.</p>
<p>4 This is a test.</p>
<p>5 This is a test.</p>
<p>6 This is a test.</p>

...

function takeAction() {
  this.style.color = 'red';
}

var els = document.getElementsByTagName('p');
for (var i = 0; i < els.length; i++) {
  var el = els[i];

  // logs els 1 to 6 as expected.
  console.log(el.innerHTML);

  el.addEventListener('click', function() {

    // logs "6 This is a test.", and makes the last <p> tag red,
    // regardless of which <p> element you click on.
    console.log(el.innerHTML);
    takeAction.call(el);

  }, false);
}

Answer 1

这是因为闭包，在您的代码中您引用了“el”。所有事件处理程序都引用同一个变量 el ，该变量已更改为循环中给出的最后一个值。 试试这个，

function takeAction() {
  this.style.color = 'red';
}

var els = document.getElementsByTagName('p');
for (var i = 0; i < els.length; i++) {
  var el = els[i];

  // logs els 1 to 6 as expected.
  console.log(el.innerHTML);
(function(elem){
  elem.addEventListener('click', function() {

    // logs "6 This is a test.", and makes the last <p> tag red, regardless of which <p> element you click on.
    console.log(elem.innerHTML); // logs "6 This is a test."
    takeAction.call(elem);

  }, false);
})(el);
}