时间:2021-07-01 10:21:17 帮助过:1人阅读
element.addEventListener('click',function () {
this.style.backgroundColor = '#cc0000'
},false)
true或者false
true或者false是addEventListener的最后一个参数,意思是你想让你的函数在捕获阶段还是冒泡阶段执行。如果你不确定,那就使用false(冒泡阶段)。
this
在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素,那么一切都是那么的美好,你可以很简单的做很多事情。
不幸的是,虽然this非常的强大,但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论。
在w3c模型下他的运作和在传统模式下是一样的:他表示现在正在处理事件的HTML元素。
代码如下:
element.addEventListener('click',doSomething,false);
another_element.addEventListener('click',doSomething,false);
function doSomething() {
this.style.backgroundColor = '#cc0000';
}
如果你把doSomething()注册在任意一个HTML元素的click实践上,那么当用户点击的时候这个元素的背景就会变成红色。
哪个事件处理程序被注册了呢?
现在这个W3C事件注册模式有一个问题就是你不知道一个元素都有哪些事件处理程序被注册了。在传统模式下面你可以:
alert(element.onclick)
你就可以看到哪些函数注册了,undefined就是没有函数注册在这个事件上。只是在最近的DOM Level 3事件中W3C才添加了一个eventListenerList来存储已经注册了的事件处理程序。因为太新了,鲜有浏览器支持。然而,问题已经解决了。
还好的是removeEventListener()不会因为你没有注册元素的某个事件而返回错误,所以你可以不用担心的使用removeEventLister()。
微软
微软也有一个事件注册模型。跟W3C的很像,但是有一个严重的缺陷。
注册一个事件处理程序,attach到一个元素:
element.attachEvent('onclick',doSomething)
或者,你需要两个事件处理程序:
element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)
移除一个也非常简单:
element.detachEvent('onclick',spyOnUser)
缺陷
跟W3C的相比较,微软有两个严重的问题:
、事件总是冒泡,没有被捕捉的可能。
、事件处理程序是被引用的,而不是拷贝的,所以this关键字总是指向window然后就一点用都没有。
这两个问题的结果就是如果一个事件冒泡了那么你是没有可能知道哪个元素在处理事件。在后面的事件顺序一章我会详细的解释。
而且微软的标准只被IE支持,也不能用来跨浏览器。就算你只是给windows浏览器写脚本也最好别用,因为冒泡问题会让事情变得不可收拾。
继续
如果你想继续学习,请看下一章。
原文地址:http://www.quirksmode.org/js/events_advanced.html
第一次翻译 大家多多包含 我的twitter:@rehawk