javascript跨平臺事件定義和用法實(shí)例詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:15:23

javascript跨平臺事件定義和用法實(shí)例詳解

javascript跨平臺事件定義和用法實(shí)例詳解:跨平臺事件什么叫跨平臺事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。什么是EventUtil對象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。下

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascript跨平臺事件定義和用法實(shí)例詳解:跨平臺事件什么叫跨平臺事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。什么是EventUtil對象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。下

跨平臺事件

什么叫跨平臺事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。

什么是EventUtil對象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。

下面我們來看一下DOM和IE之間的對象屬性和方法做個對比（這里只指出兩者之間不同的屬性和方法），主要有以下五大點(diǎn)：
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 = {
 //監(jiān)聽事件
 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;
 },
 //返回目標(biāo)事件對象
 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,接受一個參數(shù)，即Event對象。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript跨平臺事件定義和用法實(shí)例詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：使用用法事件

熱門焦點(diǎn)

javascript跨平臺事件定義和用法實(shí)例詳解

javascript跨平臺事件定義和用法實(shí)例詳解

javascript跨平臺事件定義和用法實(shí)例詳解

最新推薦

猜你喜歡

熱門推薦