谈谈我对JavaScriptDOM事件的理解_javascript技巧

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

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

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

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

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

先定义一个块如微宇宙，之后在输出不相同，那么如何让IE和firefox下弹出的内容都一样。

衔接上一段内容，下面给点击函数的内部设置一个参数，参数名为e，然后在IE和firefox浏览器下面同时触发点击事件，我们看到firefox下面显示e为鼠标事件[object MouseEvent]，IE8下报错，弹出错误信息未定义undefined。此时你要问我错在哪里，咱们回到刚刚的那句话‘此处留个悬念'进行分析，IE8以下的浏览器的事件是不是发生在全局作用域中，从视图5-02所示看到有一个global全局对象，我们可以对global展开搜索，global的继承的方法有一个event事件，找到了IE8的专有事件方法window继承event，于是我们对这个参数e设置为window.event进行一个调试，目前我们在IE8下面看到返回了一个事件[object event]，如图5-04所示。

5-04

想必你一定发现了IE8和firefox浏览器下对话框的事件返回值各不不同，IE8的对话框[object MouseEvent]，firefox的对话框[object event]，那我们怎么让IE8和firefox下的返回值都相同呢？

看到这里，你的心里是不是有点小沮丧，挖坑挖了这么久了，怎么还没有看到水流出来，别急，正题才刚刚开始，咱们不闲聊，继续围绕正题展开分析，通过刚刚的返回值，我们继续使用断点的方法寻找能够实现IE和firefox的返回值的共同点。

经由以上分析，我们查找发现firefox下的event有我们需要的方法名可以被调用，当然，我们查找发现IE8下面的srcElement也有我们所需的方法名可以被调用，于是乎，呵呵！看到这里你的内心是不是有点小激动，一步步排除，最后发现也没有什么难的。回到正题，现在我们声明一个变量var e_child = e.srcElement || e.target; 然后我们在IE8和firefox浏览器上看到对话框信息都为[object HTMLDivElement]，如图5-05所示。

5-05

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

下面我们要解决实现窗口的容器触发事件，主要是基于上面的结构进行的一次分析。

当你有了上面基础的话，下面的内容相对于上面而言比较简单一点。

还是以上一个页面的块为例，现在我继续往块微宇宙增加一个子容器，这个子容器为行内元素koringz，取id名为coz，然后给这个元素也加一个点击事件代码同上函数，为了能区别开文本内容之间的差异。

当我分别在IE8和firefox下点击容器的内容，出现了怪异的情况，在firefox浏览器的窗口上点击时，点击中文文本内容弹出来对话框‘微宇宙'，我再点击koringz时，发现弹出了二次对话框，弹出内容都为'koringz'，那是因为我点击子容器的时候触发了上一层的点击行为，如何解决点击koringz弹出二次对话框的问题，了解一点js的程序员都知道这是冒泡事件。

那么在firefox能够清除冒泡事件的是event下的stopPropagation，于是我们给第二次点击事件函数代码块之后面加一行代码e.stopPropagation();之后再点击koringz发现弹出一次'koringz'。如图5-06所示

5-06

接下来在IE8下面测试一下，发现在IE8浏览器点击也弹出二次，解决IE8的停止冒泡事件为cacelBubble，且我们只需要给cacelBubble设置为true即可。

因为IE8下global包含的event属性cacelBubble不是一个方法，而是一个输出布尔值的对象，所以这个和firefox有所不同，只是firefox把此事件封装成方法而已。好了，现在我们给第二次点击的事件代码块之后再加一行代码e.cancelBubble = true;然后在IE8浏览器下测试，之后再点击koringz发现也弹出一次。如图5-07所示

5-07

注意上面的停止冒泡的事件的代码可以根据浏览器的不同分开来写，如何分开写，我们查看IE8浏览器下面的document发现存在对象all，而在firefox却没有没有这个all属性，这也就是说document.all是IE8版本下面独有的一个属性。通过它我们可以区分浏览器的冒泡事件。

到目前为止，我们解决了窗口的冒泡事件，接下来，我们要解决一个事件因被多人定义而覆盖原函数的问题。也可能是说某公司之前的工作人员添加了此事件，后来新员工接手项目后添加修改此事件而覆盖了原事件的执行所产生的问题。也就是说给当前id多次添加此类事件都不会覆盖此事件的原函数执行。

在firefox下的window包含有addEventListener(type, listener, useCapture)的方法，随后我们在

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com