事件模型在各浏览器中存在差异(2)

依次点击 'attachEvent' >> 'addEventListener' >> 'onClick'，结果如下：

IE6 IE7 IE8

 
Chrome Safari

 
Opera

 
Firefox  

汇总测试结果如下表：1

事件对象获取方式 IE6 IE7 IE8 Chrome Safari Opera Firefox
window.event Y   Y   Y   N  
arguments[0] Y2   Y   Y   Y  

注1： Y 表示支持该事件对象获取方式，N 表示不支持。

注2： 部分支持。

从上表出可以看出：

只有在使用 attachEvent 方法注册事件监听器的时候，IE 才支持使用事件监听器传入的第一个参数作为事件对象的方式； Chrome Safari Opera 两种获取事件对象的方式都支持； Firefox 只支持获取事件对象的标准方式。 3. 各浏览器中事件对象的属性和方法的差异

IE 对事件对象的标准属性和方法支持有限，针对大部分属性和方法，IE 都提供了一套替代非标准的替代方案； 而 Firefox Chrome Safari Opera 除了全面支持事件对象的标准属性和方法外，还在不同程度上支持了 IE 提供的非标准替代方案。

以下代码检测了 Event、UIEvent、MouseEvent 接口以及事件对象的非标准属性在各浏览器下的支持程度：

<button type="button">Interface Event</button> <button type="button">Interface UIEvent & MouseEvent</button> <input type="text" /> <p><a href="#"><img src="https://www.jb51.net/google.gif" alt="IE"/></a></p> <br /> <table> <tbody> <tr> <th>Interface Event</th> <td></td> </tr> <tr> <th>Interface UIEvent<br/>&<br/>MouseEvent</th> <td></td> </tr> <tr> <th>Non-standard<br/>&<br/>click</th> <td></td> </tr> <tr> <th>Non-standard<br/>&<br/>mouseover mouseout</th> <td></td> </tr> <tr> <th>Non-standard<br/>&<br/>keyCode</th> <td></td> </tr> </tbody> </table> <script type="text/javascript"> function $(id){return document.getElementById(id);} function addEvent(elem, type, handler, useCapture){ elem.addEventListener ? elem.addEventListener(type, handler, useCapture) : elem.attachEvent("on" + type, handler); } addEvent($("iEvent"), "click", handleEvent, false); addEvent($("iUIMouse"), "click", handleUIMouse, false); addEvent($("nosCM"), "click", handleNoSClick, false); addEvent($("wrap"), "click", function(){alert("P tag.");}, false); addEvent($("nosCM"), "mouseover", handldNoSMouse, false); addEvent($("nosCM"), "mouseout", handldNoSMouse, false); addEvent($("nosK"), "keydown", handleNoSKey, false); addEvent($("nosK"), "keypress", handleNoSKey, false); addEvent($("nosK"), "keyup", handleNoSKey, false); function handleEvent(e){ e = e || window.event; var props = { type : "type", target : "target", currentTarget : "currentTarget", eventPhase : "eventPhase", bubbles : "bubbles", cancelable : "cancelable", timeStamp : "timeStamp", initEvent : "initEvent", preventDefault : "preventDefault", stopPropagation : "stopPropagation" }; showMsg(props, e, $("einfo")); } function handleUIMouse(e){ e = e || window.event; var props = { view : "view", detail : "detail", initUIEvent : "initUIEvent", screenX: "screenX", screenY : "screenY", clientX : "clientX", clientY : "clientY", ctrlKey : "ctrlKey", shiftKey : "shiftKey", altKey : "altKey", metaKey : "metaKey", button : "button", relatedTarget : "relatedTarget", initMouseEvent : "initMouseEvent" } showMsg(props, e, $("minfo")); } function handleNoSClick(e){ e = e || window.event; e.returnValue = false; e.cancelBubble = true; var props = { cancelBubble : "cancelBubble", offsetX : "offsetX", offsetY : "offsetY", returnValue : "returnValue", srcElement : "srcElement", x : "x", y : "y" }; showMsg(props, e, $("ncinfo")); } function handldNoSMouse(e){ e = e || window.event; var props = { fromElement : "fromElement", toElement : "toElement" }; showMsg(props, e, $("nminfo")); } function handleNoSKey(e){ e = e || window.event; $("nkinfo").innerHTML += "<strong>" + e.type + "</strong> : " + e.keyCode + "<br/>"; } function showMsg(props, e, info){ var tmp = "", p, val; with(e){ for(p in props) { try{ val = eval(props[p]) + " [" + typeof eval(props[p]) + "]"; } catch (e) { val = undefined; } tmp += "<strong>" + p + "</strong> : " + val + "<br />" } } info.innerHTML = tmp; } </script>