1. 事件模型的差异

在Web页面中，事件是一种观察者模式的设计模式，即在一个对象上发生事件时，其它对象可以得到通知并做出相应的的处理。

但是，IE与其它主流浏览器的事件模型存在差异。IE采用了“事件冒泡”模型，而其它主流浏览器则采用了“事件捕获”模型。

事件冒泡模型

事件从最具体的元素开始发生，然后逐级向上传播到较为不具体的节点

事件捕获模型

事件从最不具体的结点开始发生，逐级向下传递到最具体的节点

2. 事件对象兼容性

IE与其它主流浏览器在事件对象上也存在差异，可能会导致某些事件在两种浏览器中产生不一样的结果。

IE事件对象

在IE中，事件对象是window.event。IE还有一些非标准的事件对象，例如event.srcElement等。

标准事件对象

标准事件对象则包含target、type、preventDefault()、stopPropagation()、stopImmediatePropagation()等属性和方法。

3. 示例说明

下面通过两个简单的示例来说明事件模型与事件对象的差异：

示例一

<html>  
<head>  
    <script type="text/javascript">  
        function init(){  
            var obj=document.getElementById("test");  
            obj.onclick=alertEvent;  
        }  
        function alertEvent(e){  
            e=e||window.event;  
            alert(e.target||e.srcElement);  
        }  
    </script>  
</head>  
<body onload="init()">  
    <div id="test">Click me</div>  
</body>  
</html>

这段代码通过给元素设置onclick事件，在IE和FF浏览器中分别弹出元素的信息。

示例二

<html>  
<head>  
    <script type="text/javascript">  
        function init(){  
            var obj=document.getElementById("test");  
            obj.addEventListener("click",alertEvent,false);  
            obj.attachEvent("onclick",alertEvent);  
        }  
        function alertEvent(e){  
            e=e||window.event;  
            alert(e.target||e.srcElement);  
            e.preventDefault?e.preventDefault():e.returnValue=false;  
            e.stopPropagation?e.stopPropagation():e.cancelBubble=true;  
        }  
    </script>  
</head>  
<body onload="init()">  
    <div id="test">Click me</div>  
</body>  
</html>

这段代码在元素上同时注册了两个点击事件，分别是标准事件和IE事件。

在事件函数中同时调用了两个函数来阻止事件冒泡和默认行为的发生，以实现不同浏览器之间的兼容。其中，preventDefault()方法和returnValue属性用于阻止默认行为的发生，stopPropagation()方法和cancelBubble属性用于阻止事件冒泡的发生。

通过以上的两个示例，可以看出IE和其它浏览器在事件模型和事件对象方面的差异，同时也可以通过对应的解决方案实现不同浏览器之间的兼容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Js event事件在IE、FF兼容性问题 - Python技术站

Js event事件在IE、FF兼容性问题