那么在firefox能够清除冒泡事件的是event下的stopPropagation，于是我们给第二次点击事件函数代码块之后面加一行代码e.stopPropagation();之后再点击koringz发现弹出一次'koringz'。如图所示
接下来在IE8下面测试一下，发现在IE8浏览器点击也弹出二次，解决IE8的停止冒泡事件为cacelBubble，且我们只需要给cacelBubble设置为true即可。
因为IE8下global包含的event属性cacelBubble不是一个方法，而是一个输出布尔值的对象，所以这个和firefox有所不同，只是firefox把此事件封装成方法而已。好了，现在我们给第二次点击的事件代码块之后再加一行代码e.cancelBubble=true;然后在IE8浏览器下测试，之后再点击koringz发现也弹出一次。如图所示
注意上面的停止冒泡的事件的代码可以根据浏览器的不同分开来写，如何分开写，我们查看IE8浏览器下面的document发现存在对象all，而在firefox却没有这个all属性，这也就是说document.all是IE8版本下面独有的一个属性。通过它我们可以区分浏览器的冒泡事件。
到目前为止，我们解决了窗口的冒泡事件，接下来，我们要解决一个事件因被多人定义而覆盖原函数的问题。也可能是说某公司之前的工作人员添加了此事件，后来新员工接手项目后添加修改此事件而覆盖了原事件的执行所产生的问题。也就是说给当前id多次添加此类事件都不会覆盖此事件的原函数执行。
在firefox下的window包含有addEventListener(type,listener,useCapture)的方法，随后我们在<scripttype="text/javascript"></script>内部定义此监听事件domElement.addEventListener('click',function(e){confirm(e+'e')},false);，接着在firefox浏览器点击内容弹出二次，最后一次弹出为[objectMouseEvent]e，后面多了一个e，这是我有意加上用以区别的。如图所示。
接下来在IE8下测试发现addEventListener错误，但是看到window下有此类方法（尝试了一下，原来此类方法在IE9以上版本是可以被支持），IE8同时还有一个attachEvent(event,pdisp)，那么我们设置监听事件wyz.attachEvent('onclick',function(e){confirm(e+'e')}),注：event为'onclick'，紧接着在IE8下点击发现可弹出二次，最后一次[objectMouseEvent]e。此时on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。
综上所述，我们解决了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用。
您可能感兴趣的文章: