什么叫跨平臺(tái)事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。
什么是EventUtil對(duì)象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個(gè)容器，方便管理事件對(duì)象，它沒(méi)有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。
下面我們來(lái)看一下DOM和IE之間的對(duì)象屬性和方法做個(gè)對(duì)比（這里只指出兩者之間不同的屬性和方法），主要有以下五大點(diǎn)：
| DOM屬性和方法 | IE屬性和方法 |
| charcode | keycode |
| preventDefault | returnValue=false |
| relatedTarget | fromobj|toobj |
| stopPropation | cancelBuble=true |
| target | srcobj |
我們用一個(gè)小demo看一下，能夠很好的解決事件跨平臺(tái)的兼容問(wèn)題：
<html><head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { //監(jiān)聽(tīng)事件 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對(duì)象 getEvent: function(event) { return event || window.event; //return event ? event : window.event; }, //返回目標(biāo)事件對(duì)象 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>上面的方法能夠解決事件跨平臺(tái)問(wèn)題，接下來(lái)，我們看下charCode的屬性。
首先給eventUtil定義一個(gè)新方法，formatEvent,接受一個(gè)參數(shù)，即Event對(duì)象。
eventUtil.formatEvent=function(event){ if(isIE&&isWin) { event.charCode=(event.type=="keypress")?event.keycode:0; event.eventphase=2;--表示冒泡階段，IE僅支持冒泡階段 } return event;}二：關(guān)于冒泡中的target和currentTarget
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的， 而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件的父級(jí)。
<div id="outer" style="background:#099"> <p>我是目標(biāo)div</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標(biāo)p</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <br> ----點(diǎn)擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>//看下第二個(gè)變列：<div id="outer" style="background:#099"> <div>我是目標(biāo)div</div> ----點(diǎn)擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標(biāo)p</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <br> ----點(diǎn)擊這部分，輸出：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區(qū)別
| DOM | IE | |
| 獲取目標(biāo) | event.target | event.srcElement |
| 獲取字符代碼 | event.charCode | event.keyCode |
| 阻止默認(rèn)行為 | event.prevetDefault() | event.returnvalue=false |
| 冒泡 | event.stopPropagation() | event.cancelBubble=true |
關(guān)于阻止默認(rèn)行為，比如，當(dāng)用戶右擊鼠標(biāo)時(shí)，如果你不想菜單彈出，則可以使用阻止默認(rèn)行為：
document.body.oncontextmenu=function(event){ if(isIE) { var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false；阻止默認(rèn)行為 } else { oEvent.preventDefault(); }}四：鼠標(biāo)事件
<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><!--檢測(cè)鍵盤(pán)事件--><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可以判斷鼠標(biāo)的來(lái)源和出處}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;}以上這篇js中最容易被忽視的事件問(wèn)題大總結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
