2

我用来学习 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元素？

4

3 回答 3

2

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

  1. 您根本无法将事件处理程序附加到 HTML 节点列表（嗯，您可以，但什么都不会发生）；
  2. 您正在尝试将“onclick”设置为语句的结果alert()，而不是您示例中的函数。（没关系，因为它无论如何都行不通。）

现在有一种方法可以只用一个事件处理程序来处理点击，但我会让你继续阅读你的书:-)

编辑-详细说明第2点，这：

alert("hi");

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

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

设置“paras”所指对象的“onclick”属性，并将其设置为从返回的值alert()（可能始终为undefined）。

正如您书中的示例代码一样，“onclick”处理程序之类的东西需要是functions。这就是您的示例代码中间发生的情况：每个单独的<p>DOM 元素的“onclick”属性都被设置为一个函数。该函数内部是对alert().

于 2012-06-23T19:25:34.963 回答
1

假设你有

​&lt;p>​First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

所以会返回一个likevar paras = document.getElementsByTagName("p");的集合p

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

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

即使你只有一个p，它也会返回一个包含一个p元素的数组，即

​&lt;p>​First Paragraph</p>

并且var paras=document.getElementsByTagName("p");会回来[<p>​First Paragraph​&lt;/p>​]

因此，要添加事件处理程序，您可以简单地编写

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

这是一个例子，我希望它能帮助你理解这个过程。

于 2012-06-23T19:49:37.653 回答
0

不，那是行不通的。

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

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

var para = document.getElementByTagId('myParagraph');
paras.onclick = function(){ alert("You clicked on a paragraph.") };
于 2012-06-23T19:34:58.173 回答