谈谈我对JavaScript DOM事件的理解

什么是事件？

事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将寸步难行。在我们平时的开发过程中，jQuery的出现使得我们得心应手，然而你必须知道，jQuery之所以把事情简单化，是得益于JavaScript本身提供的强大的API，你应该去熟悉它们。

首先，此文不讨论繁琐细节，但是考虑到读者的心灵感受，本着以积极向上的心态，在此还是会列举示例说明。

​标题为理解DOM事件，那么在此拿一个简单的点击事件为例，希望大家看到这个例子后能触类旁通。 最初我们给页面实现点击，就像下面这样的简单操作。

先定义一个块如

，之后在内部定义此监听事件domElement.addEventListener('click',function(e){confirm(e+'e')},false);，接着在firefox浏览器点击内容弹出二次，最后一次弹出为[object MouseEvent]e，后面多了一个e，这是我有意加上用以区别的。如图5-08所示。

5-08

接下来在IE8下测试发现addEventListener错误，但是看到window下有此类方法（尝试了一下，原来此类方法在IE9以上版本是可以被支持），IE8同时还有一个attachEvent(event,pdisp)，那么我们设置监听事件wyz.attachEvent('onclick',function(e){confirm(e + 'e')}),注：event为'onclick'，紧接着在IE8下点击发现可弹出二次，最后一次eIE。此时on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。

综上所述，我们解决了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用。