JavaScript高级之事件模式(解决浏览器兼容问题)

事件类型 :

主要有 : 冒泡模型 , 捕捉模型.

用的最多的还是冒泡模型,而且在一般情况下,我们都会阻止事件的冒泡,还遗留了一个小问题就是浏览器的兼容性问题解决.

自定义方法解决

代码如下 :

//阻止事件冒泡

function handlerBubble(event){

if(window.event){

//IE

window.event.cancelBubble = true;

}else{

//chome , firefox

event.stopPropagation();

}

}

----------------------------------------------------------------

在事件回调函数中直接调用handlerBubble函数就可以了.

<script type="text/javascript">

//这个是有问题的,会产生事件冒泡
window.onload = function(){

//div1
var div1Obj = document.getElementById("div1");
div1Obj.onclick = function(event){
alert("我是div1");
handlerBubble(event);
}

//div2
var div2Obj = document.getElementById("div2");
div2Obj.onclick = function(evnet){
alert("我是div2");
handlerBubble(event);
}

//div3
var div2Obj = document.getElementById("div3");
div3Obj.onclick = function(event){
alert("我是div3");
handlerBubble(event);
}
}
</script>