Question

<!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

问题：

divs[i].onclick，divs是htmlcollection，它不是一个arrary，我们怎么能使用数组样式：array[i]？对于事件处理程序，为什么我们不将var放在它前面（例如var divs[i].onclick）？
e = e || event，为什么要event放在这里？为什么不将var放在e前面，是因为e是全局变量？

Answer 1

divs[i].onclick，divs是htmlcollection，它不是一个arrary，我们怎么能使用数组样式？

它实际上是一个NodeList，它是一个“类似数组”的对象，因为它具有length属性，而您实际关注的属性是数字键控的。

对于事件处理程序，为什么我们不将var放在它前面？

因为您引用 NodeList的元素。您不想声明新变量，而是希望使用现有引用。

e = e || event，为什么要把事件放在这里？

这是为了处理旧版本的Internet Explorer，其中事件对象未传递给处理程序，而是可以window.event访问。

为什么不将var放在e之前，是因为e是全局变量？

不，它作为参数传递给事件处理函数，因此不需要在函数内声明它。

Answer 2

divs [i] .onclick，divs是htmlcollection，它不是一个arrary，我们怎么能用数组样式：array [i]？

“HTML集合”（NodeLists）指定以允许基于索引的访问。

对于事件处理程序，为什么我们不把var放在它前面（例如var divs [i] .onclick）？

因为那根本没有意义。您正在为现有对象的属性分配值 - 不涉及变量，也没有尝试在此处使用var关键字的任何意义。

e = e ||事件，为什么把事件放在这里？为什么不把var放在e的前面，是因为e是全局变量？

这是（较旧的）IE的黑客，否则不会正确地将事件对象传递给处理函数。变量e已经是局部的，因为它被定义为函数的参数。

Answer 3

var divs使用

document.getElementByTagName，因此已经定义了它。 var e中也定义了function(e)，因此您无需定义它。

Answer 4

Q1：

divs是一个包含HTMLElement对象的数组。因此divs[i]是一个HTMLElement，您可以在其上定义onclick事件。这是

的捷径

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

Q2：

e是侦听器事件函数的参数。不同的浏览器以不同方式调用事件函数。在某些浏览器中，event对象在函数内部显式可用，并且某些浏览器将事件对象作为参数e传递。因此，为了使代码浏览器独立，我们使用此代码段e = e || event。如果e参数为非null，则代码将使用该对象，否则当e为null event时，对象应该可用。两者都不可能为空。

试图理解js中的事件处理程序代码

4 个答案: