为所有子节点添加事件

Question

为什么将事件添加到document.querySelector('li')可以正常工作，但将事件添加到document.getElementsByTagName('li').childNodes为什么会导致错误，以及如何解决此问题并将事件附加到其所有子项节点成功，我知道使用childNodes会创建一个数组，但是我们如何添加它。 我应该使用for循环吗？

Answer 1

您可以将事件添加到元素，但不能添加到集合。

您可以从元素而非集合中访问childNodes 。 请注意， childNodes可能包括不支持事件处理程序的文本节点。

您需要的是document.querySelectorAll() ，它基于CSS选择器创建元素的集合。

您可以使用for循环遍历集合，并在此过程中添加事件侦听器：

 var nodes= document.querySelectorAll('li > *'); for(var i = 0 ; i < nodes.length ; i++) { nodes[i].addEventListener('click', function() { alert('You clicked ' + this.textContent); }); } 

 li * {background: orange;} 

 <ul> <li>Lorem <em>ipsum</em> dolor <strong>sit</strong> amet</li> <li>Consectetur <em>adipiscing</em> elit</li> <li>beatae <em>vitae</em> dicta <strong>sunt</strong></li> </ul> 

Answer 2

for(var element : document.getElementsByTagName('li')) {
  Event.observe(element, "click", function(){...});
}