还是以上一个页面的块为例，现在我继续往块<div>微宇宙</div>增加一个子容器，这个子容器为行内元素<span>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版本下面独有的一个属性。通过它我们可以区分浏览器的冒泡事件。
到目前为止，我们解决了窗口的冒泡事件，接下来，我们要解决一个事件因被多人定义而覆盖原函数的问题。也可能是说某公司之前的工作人员添加了此事件，后来新员工接手项目后添加修改此事件而覆盖了原事件的执行所产生的问题。也就是说给当前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下点击发现可弹出二次，最后一次eIE。此时on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。
综上所述，我们解决了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用。
您可能感兴趣的文章: