爲什麼要創建循環來獲取事件的元素？

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是一個例子，我希望它會幫助你瞭解這個過程。