addEventListener() 不适用于元素列表答案

【问题标题】：addEventListener() not working on list of elementsaddEventListener() 不适用于元素列表
【发布时间】：2013-12-27 18:00:24
【问题描述】：

我有一个段落元素数组。单击每个<p> 时，我希望从DOM 中删除该元素。我编写的代码仅在元素由其 id 指定时才有效。我尝试使用 this 关键字，以及循环遍历元素但没有任何成功，如下面的代码所示。

我在这里做错了什么？我该如何克服它？

<div class="section" id='section2'>
<a name="section-two" href="#top">Section Two</a>

        <p id='tester'>Text here <span><img src='images/remove.png' height='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' width='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' height='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' height='20px'/></span></p>
    </div>

var section2 = document.getElementById('section2').getElementsByTagName('p');

for(var i = 0; i < section2.length; i++) {

  section2[i].addEventListener('click', function() {
  section2[i].parentNode.removeChild(section2[i]);
  }, false);
}

【问题讨论】：

标签： javascript for-loop addeventlistener removechild

【解决方案1】：

我会在父级而不是子级上附加一个监听器，然后检查点击了什么。这比附加 n 侦听器要高效一些，尤其是在您无论如何要从 DOM 中删除的项目上。

var parent = document.getElementById('section2');

parent.addEventListener('click', function (event) {
    if (event.target.tagName === 'P') {
        parent.removeChild(event.target);
    }
}, false);

我做了一个fiddle 来说明我将如何继续做类似的事情。

为了完整起见：您编写的代码也不起作用，因为您在回调中引用了i 变量。在您的情况下，当执行回调时，i 将始终等于循环分配的最后一个值。您需要将 i 重新分配给回调中的局部变量才能执行此操作（这样您将拥有“副本”而不是引用）。此外，如果您关心 IE lt 8，则必须重写它以使用旧版 IE attachEvent api，但我假设（基于没有特别的内容）您不需要它。

【讨论】：

谢谢，作为上述答案的扩展。如果我想让图像标签成为删除其父段落标签的唯一可点击区域，我该怎么做？
您将通过标签名称过滤掉不同的事件目标，然后引用其父级，例如 jsfiddle.net/48jkL

【解决方案2】：

var section2 = document.getElementById('section2').getElementsByTagName('p');
alert(section2.length)
for(var i = 0; i < section2.length; i++) {

  section2[i].addEventListener('click', function() {
  this.parentNode.removeChild(this);
}, false);
}

将 section2[i] 替换为内部回调函数，

由于 javascript 关闭，我将等于 section2.length，

小提琴http://jsfiddle.net/v7FvW/1/

【讨论】：