什么是事件？

事件是JavaScript应用程序跳动的心脏，也是将一切粘在一起的粘合剂。当我们以某种方式在浏览器中与网页交互时，就会发生事件。事件可能是用户点击某个东西、鼠标经过某个特定元素或按下键盘上的某些键。事件也可能是发生在网络浏览器中的事情，例如加载网页，或者用户滚动窗口或更改窗口大小。

通过使用JavaScript，您可以监视特定事件的发生，并指定某些事件应该响应这些事件而发生。

DOM和事件是JavaScript的核心组件之一。他们给了这一页无限的想象力。你不能离开他们，否则js将无法移动。在我们平时的开发过程中，jQuery的出现让我们得心应手，但是你一定知道jQuery之所以简化事情，是因为JavaScript本身提供了强大的API，你应该很熟悉。

首先，本文不讨论繁琐的细节，但考虑到读者的精神感受，并以积极的态度，这里将举例说明。

为了理解DOM事件，让我们以一个简单的点击事件为例。希望大家能从这个例子中学习。我们最初点击页面，就像下面简单的操作一样。

首先定义一个div id='weiyuzhou '微宇宙/div这样的块，然后在script type=' text/JavaScript '/script中实现id为weiyuzhou的click事件，如下代码所示：

var wyz=document . getelementbyid(' weiyuzhou ')；Wyz。onclick=function(){ confirm(arguments . length)}只有以上步骤都做好了，我们才能继续往下走，然后我们会在IE浏览器(低版本)看到一个弹出的0，准确的说是IE8(包括IE8)下面一个弹出的0，否则一个弹出的1。然后我在火狐浏览器中看到了pop 1。也就是说IE8以下事件的触发不在函数的范围内，也就是说IE8以下事件的触发发生在全局范围内，这里有一个悬念。但是，可以肯定的是，IE8以下事件的方法没有这个事件参数，这意味着参数的长度为0，如下图5-02所示：

5-02

因此我们看到火狐浏览器窗口弹出1，表示事件存在于函数内部，再次证明方法内部数组参数长度为1，是可枚举变量，也可以说是可写的，如下图5-03所示。

5-03

如果还是不明白原理，那就看看《web前端开发修炼之道》书的第169页，再回头看看这里的文章总结，可能会让你对书的内容有更深的理解。

接下来，我们该怎么办？我们当然不能让IE和火狐返回的事件输出不一样，那么如何让IE和火狐下的弹出内容一样呢？

链接上一段，在下面的click函数里面设置一个参数，参数名为E，然后在IE和火狐浏览器下同时触发click事件。我们可以看到E是火狐下的鼠标事件，IE8报告错误，弹出的错误消息是未定义的。这个时候，你要问我哪里错了。回到刚才那句话，‘这里留个悬念’，分析一下IE8以下的浏览器事件是否发生在全局范围内。如图5-02所示，有一个全局全局对象，所以我们可以搜索全局。global的继承方法有一个event event事件，发现IE8的独占事件方法窗口继承了该事件。因此，我们将此参数e设置为window.event进行调试。目前我们看到IE8下返回了一个事件[object event]，如图5-04所示。

5-04

你一定注意到了IE8和firefox下对话框的事件返回值是不同的。IE8【对象MouseEvent】的对话框和firefox【对象事件】的对话框，那么如何才能让IE8和firefox下的返回值相同呢？

看到这，你心里有点郁闷。挖了这么久的坑，怎么还没看到水流出来了？别急，话题才刚刚开始。我们不聊了，继续围绕话题分析。通过刚才的返回值，我们继续用断点法寻找可以实现IE和火狐返回值的共同点。

通过上面的分析，我们发现firefox下的event有我们需要调用的方法名，当然我们发现IE8下的srcElement也有我们需要调用的方法名，所以，呵呵！看到这里，你的心是不是有点激动？一步一步来，不难发现。回到主题，现在我们声明一个变量var e _ child=e . srcelement | | e . target；然后，我们在IE8和firefox浏览器上看到的对话框消息是[object html dividelement]，如图5-05所示。

5-05

现在我们解决了不同浏览器返回值不同的问题，也就是说解决了兼容性的问题，这只是冰山一角。

接下来，我们将解决实现窗口的容器触发事件，这主要是基于对上述结构的分析。

有了上面的基础，下面的内容就比上面简单一点了。

以上一页的区块为例。现在我继续给区块div id='weiyuzhou '微宇宙/div添加一个子容器。这个子容器是内联元素span id='coz'koringz/span，id名为coz。然后我还向这个元素添加了一个click事件代码，与上面的函数相同，以便区分文本内容之间的差异。

当我分别点击IE8和firefox下的容器内容时，出现了一个奇怪的情况。当我点击火狐浏览器的窗口时，我点击了中文文本内容，弹出了一个名为“微宇宙”的对话框。当我再次点击koringz的时候，发现弹出的是二级对话框，弹出的内容都是‘koringz’，这是因为我点击子容器的时候，触发了上层的点击行为。如何解决点击koringz弹出二级对话框的问题？

所以firefox能够清除冒泡事件的是event下的stopPropagation，所以我们在第二个click event函数的代码块后添加了一行代码e . stopperpagation()；然后点击koringz，发现“koringz”弹出一次。如图5-06所示。

5-06

接下来我们在IE8下进行了测试，发现在IE8的浏览器中点击时会弹出两次。IE8中停止冒泡的解决方案是cacelBubble，我们只需要将cacelBubble设置为true。

因为IE8下的global中包含的事件属性cacelBubble不是一个方法，而是一个输出布尔值的对象，这与firefox不同，只是firefox将这个事件封装为一个方法。好了，现在我们在第二次点击事件代码块后，添加一行代码e.cancelBubble=true然后在IE8浏览器下测试，然后点击koringz发现又弹出来了。如图5-07所示。

5-07

注意上面停止冒泡的代码可以根据不同的浏览器分别编写，以及如何分别编写。当我们在IE8浏览器下查看文档时，我们发现有一个对象all，但是在firefox中没有这样的属性all，这意味着document.all是IE8版本下唯一的属性。通过它，我们可以区分浏览器冒泡事件。

到目前为止，我们已经解决了窗口冒泡事件。接下来，我们要解决一个事件由多人定义，并且覆盖了原有功能的问题。也可能是某公司前员工添加了这个事件，然后新员工接手项目后添加修改了这个事件，涵盖了原事件执行带来的问题。也就是说，将这种事件多次添加到当前id中不会覆盖该事件的原始函数执行。

firefox下的窗口包含addeventlistener的方法(type，listener，use capture)，然后我们在script type=' text/JavaScript '/script中定义这个监控事件dome element . addevent listener(' click '，function (e) {confirm (e' e')}，false)；然后在火狐浏览器中点击内容弹出两次，最后一次弹出的是[object MouseEvent]e，后面是一个e，我特意加了来区分。如图5-08所示。

5-08

然后在IE8下测试后发现addEventListener是错误的，但是我们看到window下有这样的方法(原来IE9以上可以支持这样的方法)，IE8也有一个attachEvent(event，pdisp)，所以我们设置了监听事件wyz.attachEvent('onclick '，Function(e){ confirm(e ' e ' })，注意：事件是' onclick '，然后在IE8下点击发现第二个也是最后一个e IE可以弹出。此时，on('click '，pdisp)和attachEvent(event，pdisp)可以一起使用。

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