試圖瞭解在JS事件處理程序代碼

<!DOCTYPE HTML> 
<html> 
<body> 
<link type="text/css" rel="stylesheet" href="example.css"> 
<div class="d1">1 
    <div class="d2">2 
     <div class="d3">3 
     </div> 
    </div> 
</div> 
<script> 
var divs = document.getElementsByTagName('div') 
for(var i=0; i<divs.length; i++) { 
    divs[i].onclick = function(e) { 
    e = e || event 
    var target = e.target || e.srcElement 
    this.style.backgroundColor='yellow'  
    alert("target = "+target.className+", this="+this.className) 
    this.style.backgroundColor = '' 
    } 
} 
</script> 
</body> 
</html>

上面的代碼是從http://javascript.info/tutorial/bubbling-and-capturing 試圖瞭解在JS事件處理程序代碼

問題：

divs[i].onclick，divs是的HTMLCollection，它不是一個arrary，我們如何使用數組風格：array[i]？對於事件處理程序，爲什麼我們不把var在它的前面（如var divs[i].onclick）？
e = e || event，何必把event這裏？爲什麼不把var在e面前的，是因爲e是全局變量？

來源

2013-06-26 user2507818

for e = e ||事件它的兼容性原因在IE中事件對象在那裏出去傳遞給事件處理程序，但在其他事件必須通過事件處理程序的參數傳遞 – Marwan

** e **是**函數的參數（e ）**，如果你沒有說，'e = e ||事件'返回事件（函數的默認事件變量） – user1487380

看起來JS喜歡數組語法：new String（「HELLO」）[0]與new String（「HELLO」）相同charAt（0） –

divs[i].onclick,divs是htmlcollection，它不是一個文件，我們怎麼可以使用數組樣式？

它實際上是一個NodeList，這是一個「陣列式」的對象，因爲它有一個length財產，你真正關心的性質是數字鍵。

對於事件處理程序，爲什麼我們不把var放在它的前面？

因爲你引用的NodeList的元素。你不想聲明一個新的變量，你想使用現有的引用。

e = e || event，爲什麼把事件放在這裏？

這是爲了處理舊版本的Internet Explorer，其中事件對象沒有傳遞給處理程序，而是可以作爲window.event訪問。

爲什麼不把var放在e的前面，是因爲e是全局變量嗎？

不，它作爲參數傳遞到事件處理函數中，所以不需要在函數中聲明它。

來源

2013-06-26 08:52:29

的div [I] .onclick，div的是的HTMLCollection，它不是一個arrary，我們如何使用數組風格：數組[我]？

「HTML集合」（NodeLists）爲指定以允許基於索引的訪問。

爲什麼我們不把var放在它的前面（比如var divs [i] .onclick）？

因爲那將毫無意義可言。您正在爲現有對象的屬性賦值 - 不涉及任何變量，在此嘗試使用var關鍵字也沒有任何意義。

E = ||ë事件，爲什麼把事件放在這裏？爲什麼不把var放在e的前面，是因爲e是全局變量嗎？

這是（老）IE的黑客，否則不會正確地將事件對象傳遞給處理函數。變量e是本地的，因爲它被定義爲函數的參數。

來源

2013-06-26 08:52:18 CBroe

var divs由document.getElementByTagName使用，所以它已經被定義。 var e也在function(e)中定義，所以您不需要定義它。

來源

2013-06-26 08:53:06 D051P0

Q1：

divs是含有HTMLElement的對象陣列。所以divs[i]是一個HTMLElement，你可以在其上定義一個onclick事件。這是

var element = divs[i]; 
element.onclick = function(e){ 
...

Q2快捷方式：

e是監聽事件函數的參數。不同的瀏覽器以不同的方式調用事件功能。在某些瀏覽器中event對象在函數內部顯式可用，並且一些瀏覽器將事件對象作爲參數e傳遞。爲了使代碼瀏覽器獨立，我們使用這個片段e = e || event。如果參數e非空，代碼將使用該對象，否則當e爲空時event對象應該可用。兩者都不可能爲空。

來源

2013-06-26 08:58:32 mohkhan

試圖瞭解在JS事件處理程序代碼

回答

相關問題