javascript:理解DOM事件

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

​标题为理解DOM事件，那么在此拿一个简单的点击事件为例，但愿你们看到这个例子后能举一反三。

DOM事件的兼容性

最初咱们给页面实现点击，就像下面这样的简单操做。
先定义一个块如<div id="weiyuzhou">微宇宙</div>，以后在<script type="text/javascript"></script>内部实现id为weiyuzhou的点击事件，以下代码所示：

var wyz = document.getElementById('weiyuzhou');
wyz.onclick = function () {
　　confirm(arguments.length)
}

确保上面这些步骤都没问题的话，咱们才能够继续的往下走，而后咱们在IE浏览器(低版本)看到弹出0，确切的说，IE8如下(包含IE8)的弹出0，反之弹出1。接着我在firefox浏览器看到弹出1。也就是说在IE8如下版本事件的触发不存在于函数的做用域内部，是否是说IE8如下的事件触发发生在全局做用域中，此处留个悬念，可是，能够确定的是IE8如下事件的方法并无这个Event参数，也就是说arguments的长度为0，以下视图5-02所示：

5-02

因而，咱们看firefox浏览器窗口弹出1，说明事件存在于函数内部，再次证实方法的内部数组arguments长度为1，而且是可枚举的变量，也能够说可写，以下视图5-03所示。

5-03

若是，你仍是不明白其中的原理，你不防去看一下《web前端开发修炼之道》书上第169页，而后再回过头来看此处文章摘要，可能会让你更加深层次的了解书中的内容。

接下来，咱们该怎么办呢，咱们确定不能让IE和firefox返回的事件输出不相同，那么如何让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 event]，firefox的对话框为[object MouseEvent]，那咱们怎么让IE8和firefox下的返回值都相同呢？

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

DOM事件的冒泡

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

5-05

 

 

如今咱们解决了不一样浏览器的返回值不一样的问题，也就是说解决了兼容的问题，这只是冰上一角。

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

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

仍是以上一个页面的块为例，如今我继续往块<div id="weiyuzhou">微宇宙</div>增长一个子容器，这个子容器为行内元素<span id='coz'>koringz</span>，取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版本下面独有的一个属性。经过它咱们能够区分浏览器的冒泡事件。

DOM事件的重用

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

在firefox下的window包含有addEventListener(type, listener, useCapture)的方法，随后咱们在<script type="text/javascript"></script>内部定义此监听事件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下点击发现可弹出二次，最后一次[object MouseEvent]e。此时on('click',pdisp)和attachEvent(event,pdisp)能够共同使用。

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