为什么要创建循环来获取事件的元素？

Question

我使用学习JavaScript使用下面的代码，每当用户点击一个段落时显示一个警告对话框教科书：

var paras = document.getElementsByTagName("p"); 
for (var i=0; i<paras.length; i++) { 
paras[i].onclick = function() { 
    alert("You clicked on a paragraph."); 
} 
} 

我看不出理由遍历所有p元素，而是标识它们并简单地将onclick事件处理程序附加到它。像这样：

var paras = document.getElementByTagName('p'); 
paras.onclick = alert("You clicked on a paragraph."); 

这是不是做同样的事情？为什么需要循环访问p元素？

Answer 1

不，绝对不会做同样的事情：

1. 您只需事件处理程序不能附加到HTML节点列表（当然，你可以，但什么都不会发生）;
2. 您正试图将“onclick”设置为alert()语句的结果，而不是您的示例中的函数。 （其实并不重要，因为它无论如何都不会工作。）

现在有处理只用一个事件处理程序的点击次数的方式，但我会让你继续读你的书:-)

编辑 —为了详细说明2点，这样的：

alert("hi"); 

是函数调用。它的值将是从调用该函数返回的任何值。因此，

paras.onclick = alert("You clicked on a paragraph."); 

设置对象的“点击”的属性，“第”指的是，它其设置为从alert()返回的值（这可能总是undefined）。

如同您书中的示例代码一样，诸如“onclick”处理程序的东西需要为函数。这就是你的示例代码的中间情况：每个单独的DOM元素的“onclick”属性被设置为一个函数。 里面该函数是调用alert()。

Answer 2

不，那不行。

函数document.getElementsByTagName将返回一个节点数组，因为多个节点可以具有相同的名称（因此为“元素”的复数形式）：您可以在页面中包含多个段落，并且此函数将全部返回它们。即使你只有一个段落，你也会得到一个包含单个元素的数组。

另一方面，您可以通过使用document.getElementById函数选择具有其ID的节点。在这种情况下，结果将是单个节点，因为ID在文档中应该是唯一的。

var para = document.getElementByTagId('myParagraph'); 
paras.onclick = function(){ alert("You clicked on a paragraph.") }; 

Answer 3

假设你有

​<p>​First Paragraph</p> 
<p>Second Paragraph</p> 
<p>Third Paragraph</p> 

所以var paras = document.getElementsByTagName("p");将返回p集合像

[<p>​First Paragraph​</p>​, <p>​Second Paragraph​</p>​, <p>​Third Paragraph​</p>​] 

如果你写paras.onclick = alert("You clicked on a paragraph.");那么它将无法工作，因为paras是一些数组p元素不是p元素本身，只有html元素有一个事件，所以你必须遍历集合并为每个p元素分别添加事件处理程序。

即使你只有一个p那么它将返回一个数组里面坐了一个p元素，即

​<p>​First Paragraph</p> 

而且var paras=document.getElementsByTagName("p");将返回[<p>​First Paragraph​</p>​]

所以要添加事件处理程序，你可以简单地写

paras[0].onclick = function() { // 0 is the first element in the collection 
    alert(this.innerHTML); 
} 

Here是一个例子，我希望它会帮助你了解这个过程。