一、跨平臺事件
什么叫跨平臺事件？即在不同的瀏覽器上執行同一事件，所使用的方法不同。
什么是EventUtil對象？有什么作用？即將所有與事件相關的函數，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。
下面我們來看一下DOM和IE之間的對象屬性和方法做個對比（這里只指出兩者之間不同的屬性和方法），主要有以下五大點：
DOM屬性和方法 IE屬性和方法
charcode keycode
preventDefault returnValue=false
relatedTarget fromobj|toobj
stopPropation cancelBuble=true
target srcobj
我們用一個小demo看一下，能夠很好的解決事件跨平臺的兼容問題：
<html><head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { //監聽事件 addListener: function(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + eventType, fn); } else { obj['on' + eventType] = fn; } }, //返回event對象 getEvent: function(event) { return event || window.event; //return event ? event : window.event; }, //返回目標事件對象 getTarget: function(event) { return event.target || event.srcobj; }， preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, removeListener: function(obj, eventType, fn) { if (obj.removeEventListener) { obj.removeEventListener(eventType, fn, false); } else if (obj.deattachEvent) { obj.detachEvent(eventType, fn); } else { obj['on' + eventType] = null; } }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; </script></head><body> <input eventType="button" value="click me" id="btn" /> <p>event</p> <a>Hello word!</a> <script eventType="text/javascript"> function addBtnListen(event) { var event = eventUtil.getEvent(event); var target = eventUtil.getTarget(event); alert("my name is kock"); alert(event.eventType); alert(target); eventUtil.stopPropagation(event); } function getBodyListen(event) { alert("click body"); } function getLinkListen(event) { alert("prevent default event"); var event = eventUtil.getEvent(event); eventUtil.preventDefault(event); } window.onload=function() { var btn = document.getobjById("btn"); var link = document.getobjsByTagName("a")[0]; eventUtil.addListener(btn, "click", addBtnListen); eventUtil.addListener(document.body, "click", getBodyListen); eventUtil.addListener(link, "click",getLinkListen); } </script></body></html>上面的方法能夠解決事件跨平臺問題，接下來，我們看下charCode的屬性。
首先給eventUtil定義一個新方法，formatEvent,接受一個參數，即Event對象。
eventUtil.formatEvent=function(event){ if(isIE&&isWin)---檢測瀏覽器的問題 { event.charCode=(event.type=="keypress")?event.keycode:0; event.eventphase=2;--表示冒泡階段，IE僅支持冒泡階段 } return event;}二、關于冒泡中的target和currentTarget
target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的， 而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件的父級。
<div id="outer" style="background:#099"> <p>我是目標div</p> ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標p</p> ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <br> ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>//看下第二個變列：<div id="outer" style="background:#099"> <div>我是目標div</div> ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標p</p> ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <br> ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>
function getObj(id){ return document.getElementById(id); } function addEvent(obj, event, fn){ if(window.attachEvent) { obj.attachEvent("on" + event, fn); } else if(window.addEventListener) { obj.addEventListener(event, fn, false); } } function test(e){ alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = getObj("outer"); var inner = getObj("inner"); //addEvent(inner, "click", test); addEvent(outer, "click", test); 三、IE和DOM區別
DOM IE
獲取目標 event.target event.srcElement
獲取字符代碼 event.charCode event.keyCode
阻止默認行為 event.prevetDefault() event.returnvalue=false
冒泡 event.stopPropagation() event.cancelBubble=true
關于阻止默認行為，比如，當用戶右擊鼠標時，如果你不想菜單彈出，則可以使用阻止默認行為：
document.body.oncontextmenu=function(event){ if(isIE) { var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false；阻止默認行為 } else { oEvent.preventDefault(); }}四、鼠標事件
<p>use your mouse to click and double click the red square</p><div style="width:100px;height:100px;background:red" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)" onmousedown="handleEvent(event)" onmouseup="handleEvent(event)" onclick="handleEvent(event)" ondblclick="handleEvent(event)" id="div1" > </div><p><textarea id="txt1" rows="5" cols="45"></textarea></p><!--檢測鍵盤事件--><p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p><p><textarea id="txt2" rows="10" cols="45"></textarea></p>
js文件如下：
function handleEvent(event){ var oText=document.getElementById('txt1'); oText.value+= "/n"+event.type; oText.value+= "/n target is "+(event.srcElement||event.target).id; oText.value+="/n at ("+event.clientX+","+event.clientY+")in the client"; oText.value+="/n at ("+event.screenX+","+event.screenY+")in the client"; oText.value+="/n button down is"+event.button; var arrKeys=[]; oText.value+="/n relatedTarget is"+event.relatedTarget.tagName; //event.relatedTarget.tagName可以判斷鼠標的來源和出處}function handle(event){ var oText2=document.getElementById('txt2'); oText2.value+="/n"+event.type; var arrKeys=[]; if(event.shiftKey){arrKeys.push("Shift");} if(event.ctrlKey){arrKeys.push("Ctrl");} if(event.altKey){arrKeys.push("Alt");} oText2.value+="/n keydown is "+arrKeys;}以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
