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

时间:2013-06-26 08:48:34

标签: javascript

<!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].onclickdivs是htmlcollection,它不是一个arrary,我们怎么能使用数组样式:array[i]?对于事件处理程序,为什么我们不将var放在它前面(例如var divs[i].onclick)?

  2. e = e || event,为什么要event放在这里?为什么不将var放在e前面,是因为e是全局变量?

4 个答案:

答案 0 :(得分:4)

  

divs[i].onclickdivs是htmlcollection,它不是一个arrary,我们怎么能使用数组样式?

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

  

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

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

  

e = e || event,为什么要把事件放在这里?

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

  

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

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

答案 1 :(得分:0)

  

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

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

  

对于事件处理程序,为什么我们不把var放在它前面(例如var divs [i] .onclick)?

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

  

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

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

答案 2 :(得分:0)

var divs使用

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

答案 3 :(得分:0)

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时,对象应该可用。两者都不可能为空。