上一篇:JavaScript Event学习第四章:传统的事件注册模型

在这一章我会讲解两种高级时间注册模型:W3C和微软的。因为这两个方法都不能跨浏览器,所以在现在看来他们的使用场合并不多。

W3C 和微软都着力于发展自己的事件注册模型来取代 Netscape 的传统模型。虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题。不过现在只有小部分浏览器支持。

W3C

W3C的DOM层面事件规范注意到了传统模式的问题。他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法。

W3C事件注册模型的关键就是addEventListener()。你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释。把我们熟知的doSomething()函数注册到一个元素的onclick事件上,你可以这样做:
  1. 1        element.addEventListener('click',doSomething,false)
复制代码
这种模型的魅力在于我们可以想加多少监听就可以加多少。如果用我们之前的传统模式里面的例子,我们就可以写成这样:
  1. 1        element.addEventListener('click',startDragDrop,false)
  2. 2        element.addEventListener('click',spyOnUser,false)
复制代码
当用户点击元素的时候两个事件处理程序都会执行。需要注意的是W3C标准不能确定哪个事件先执行。所以你也不能认为 startDragDrop()就在spyOnUser()之前执行。

移除事件处理程序也是非常的简单,用 removeEventListener()就行了。所以:
  1. 1        element.removeEventListener('click',spyOnUser,false)
复制代码
就会移除第二个事件处理程序但是第一个不会发生变化。非常漂亮的程序,完全解决了传统模式下的问题。

匿名函数

在W3C模式下你依然可以使用匿名函数:
  1. 1        element.addEventListener('click',function () {
  2. 2            this.style.backgroundColor = '#cc0000'
  3. 3        },false)
复制代码
true或者false

true或者false是addEventListener的最后一个参数,意思是你想让你的函数在捕获阶段还是冒泡阶段执行。如果你不确定,那就使用false(冒泡阶段)。
TOP