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

问题：

  1. divs[i].onclick,divs是htmlcollection, 不是arrary, 怎么能用数组样式: array[i]? 对于事件处理程序，为什么我们不放在var它前面（例如var divs[i].onclick）？

  2. e = e || event，为什么放在event这里？为什么不放在var前面e，是因为e是全局变量吗？

4

4 回答 4

4

divs[i].onclick，divs是htmlcollection，不是数组，怎么可能用数组样式呢？

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

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

因为您正在引用. NodeList你不想声明一个新变量，你想使用一个现有的引用。

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

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

为什么不把 var 放在前面e，是因为e是全局变量吗？

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

于 2013-06-26T08:52:29.187 回答
0

Q1：

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

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

Q2：

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

于 2013-06-26T08:58:32.030 回答
0

divs[i].onclick，divs是htmlcollection，不是arrary，怎么用array style:array[i]？

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

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

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

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

这是对（较旧的）IE 的一种破解，否则它不会正确地将事件对象传递给处理函数。并且变量 e 已经是本地的，因为它被定义为函数的参数。

于 2013-06-26T08:52:18.140 回答
0

var divs被 使用document.getElementByTagName，所以它已经被定义了。 var e也被定义，function(e)所以你不需要定义它。

于 2013-06-26T08:53:06.783 回答