开发学院网页设计 JavaScript JavaScript Event学习第五章：高级事件注册模型阅读

JavaScript Event学习第五章：高级事件注册模型

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示：W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型，虽然对于微软的模型我不是很感冒，JavaScript Event学习第五章：高级事件注册模型，但是w3c的还是不错的，除了这个鼠标定位的问题，也不能用来跨浏览器，就算你只是给windows浏览器写脚本也最好别用，不过现在只有小部分浏览器支持，

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

W3C

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

W3C事件注册模型的关键就是addEventListener()。你给他三个参数：事件类型，要执行的函数和一个布尔值（true或者false)我一会再解释。把我们熟知的doSomething()函数注册到一个元素的onclick事件上，你可以这样做：

1　element.addEventListener('click',doSomething,false)

这种模型的魅力在于我们可以想加多少监听就可以加多少。如果用我们之前的传统模式里面的例子，我们就可以写成这样：

1　element.addEventListener('click',startDragDrop,false) 2　element.addEventListener('click',spyOnUser,false)

当用户点击元素的时候两个事件处理程序都会执行。需要注意的是W3C标准不能确定哪个事件先执行。所以你也不能认为startDragDrop()就在spyOnUser()之前执行。

移除事件处理程序也是非常的简单，用removeEventListener()就行了。所以：

1　element.removeEventListener('click',spyOnUser,false)

就会移除第二个事件处理程序但是第一个不会发生变化。非常漂亮的程序，完全解决了传统模式下的问题。

匿名函数

在W3C模式下你依然可以使用匿名函数：

1　element.addEventListener('click',function　()　{ 2　　　　　this.style.backgroundColor　=　'#cc0000' 3　},false)

true或者false

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

this

在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素，那么一切都是那么的美好，你可以很简单的做很多事情。

不幸的是，虽然this非常的强大，但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论。

在w3c模型下他的运作和在传统模式下是一样的：他表示现在正在处理事件的HTML元素。

1　element.addEventListener('click',doSomething,false); 2　another_element.addEventListener('click',doSomething,false); 3　　 4　function　doSomething()　{ 5　　　　　this.style.backgroundColor　=　'#cc0000'; 6　}

如果你把doSomething()注册在任意一个HTML元素的click实践上，那么当用户点击的时候这个元素的背景就会变成红色。

哪个事件处理程序被注册了呢？

现在这个W3C事件注册模式有一个问题就是你不知道一个元素都有哪些事件处理程序被注册了。在传统模式下面你可以：

alert(element.onclick)

你就可以看到哪些函数注册了，undefined就是没有函数注册在这个事件上。只是在最近的DOM Level 3事件中W3C才添加了一个eventListenerList来存储已经注册了的事件处理程序。因为太新了，鲜有浏览器支持。然而，问题已经解决了。

还好的是removeEventListener()不会因为你没有注册元素的某个事件而返回错误，所以你可以不用担心的使用removeEventLister()。

微软

微软也有一个事件注册模型。跟W3C的很像，但是有一个严重的缺陷。

注册一个事件处理程序，attach到一个元素：

1　element.attachEvent('onclick',doSomething)

或者，你需要两个事件处理程序：

1　element.attachEvent('onclick',startDragDrop) 2　element.attachEvent('onclick',spyOnUser)