js跨瀏覽器的事件偵聽器和事件對象的使用方法
本文特意為跨瀏覽器實現(xiàn)添加事件偵聽器和跨瀏覽器事件對象的使用方法做了下總結(jié),并把這些方法打包,歡迎大家學(xué)習(xí)。
打包的一個EventUtil對象
var EventUtil = { // 添加偵聽事件 addEventListener:function (element, type, handler) { // IE9+、Firefox、Safari、chrome和Opera if(element.addEventListener) { element.addEventListener(type, handler, false); } // IE8- else if(element.attachEvent) { element.attachEvent("on" + type, handler); } }, // 移除偵聽事件 removeEventListener:function (element, type, handler) { // IE9+、Firefox、Safari、chrome和Opera if(element.addEventListener) { element.removeEventListener(type, handler, false); } // IE8- else if(element.attachEvent) { element.detachEvent("on" + type, handler); } }, // 獲取事件對象 getEvent:function(event) { if(typeof event == "undefined") { event = window.event; // IE瀏覽器 } return event; }, // 獲取觸發(fā)事件的元素 getTarget:function(event){ if(typeof event.srcElement == "undefined") { return event.target; }else { return event.srcElement; // IE瀏覽器 } }, // 獲取事件類型 getType:function(event) { return event.type; }, // 獲取按鍵鍵碼 getCharCode:function(event) { if(typeof event.keyCode == "number") { return event.keyCode; // IE8-、Firefox和opera }else { return event.charCode; } }, // 獲取鼠標(biāo)相對于文檔的位置,即頁面坐標(biāo)位置 getPagePosition:function(event) { var pageX = event.pageX, pageY = event.pageY; if(pageX == undefined) { pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(pageY == undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } return { pageX:pageX, pageY:pageY }; }, // 阻止事件的默認(rèn)行為 preventDefault:function(event) { if(event.preventDefault){ event.preventDefault(); }else { event.returnValue = false; // IE瀏覽器 } }, // 阻止事件冒泡 stopPropagation:function(event) { if(typeof event.cancelBubble == "undefined") { event.stopPropagation(); }else { event.cancelBubble = true; // IE瀏覽器 } } };
測試代碼
<div id="box" style="color:red;width: 100%;height:200px;" > <input type="button" value="點擊" id="btn" /> </div> <a id="a">test</a>
var box = document.querySelector("#box"); box.onclick = function(event) { event = EventUtil.getEvent(event); alert(EventUtil.getType(event)); alert(EventUtil.getTarget(event)); }; var input = document.querySelector("input"); input.onclick = function(event) { event = EventUtil.getEvent(event); EventUtil.stopPropagation(event); }; var a = document.getElementById("a"); a.onclick = function(event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); };
以上就是跨瀏覽器實現(xiàn)添加事件偵聽器和跨瀏覽器事件對象的使用方法,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
javascript實現(xiàn)全角與半角字符的轉(zhuǎn)換
這篇文章主要介紹了javascript實現(xiàn)全角與半角字符的轉(zhuǎn)換的相關(guān)代碼與知識點分享,需要的朋友可以參考下2015-01-01Textbox控件注冊回車事件及觸發(fā)按鈕提交事件具體實現(xiàn)
Lyncplus客戶端中訪問Web頁面時遇到了TextBox控件回車自動完成按鈕的提交事件失效的情況,于是上網(wǎng)查找相關(guān)的介紹最終解決了這兩個問題,感興趣的你可以參考下或許對你有所幫助2013-03-03JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實現(xiàn)代碼
這篇文章主要介紹了JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08Bootstrap基本組件學(xué)習(xí)筆記之列表組(11)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之列表組,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法的相關(guān)資料,需要的朋友可以參考下2016-03-03JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法,結(jié)合具體實例形式分析了javascript針對二叉樹節(jié)點最小值、最大值的相關(guān)查找操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04