JavaScript中的跨瀏覽器事件操作的基本方法整理
更新時間:2016年05月20日 17:13:05 作者:云賢力
首先值得說一下,在事件處理、事件對象、阻止事件的傳播等方法或對象存在著瀏覽器兼容性問題,開發(fā)過程中最好編寫成一個通用的事件處理工具,嗯,接下來我們一起來看一下JavaScript中的跨瀏覽器事件操作的基本方法整理
綁定事件
EU.addHandler = function(element,type,handler){ //DOM2級事件處理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以這樣綁定 element.attachEvent('on' + type,handler); } //DOM0級事件處理步,事件流也是冒泡 else{ element['on' + type] = handler; } };
取消綁定事件
和綁定事件的處理基本一致,有一個注意點:
傳入的handler必須與綁定事件時傳入的相同(指向同一個函數)
EU.removeHandler = function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler); } else if(element.attachEvent){ element.detachEvent('on' + type,handler); } else{ //屬性置空就可以 element['on' + type] = null; } };
跨瀏覽器添加事件
function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }
跨瀏覽器移除事件
function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); } }
跨瀏覽器阻止默認行為
function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }
跨瀏覽器獲取目標對象
function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } }
跨瀏覽器獲取滾動條位置
//跨瀏覽器獲取滾動條位置,sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft; } }
跨瀏覽器獲取可視窗口大小
function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },
相關文章
JavaScript高級程序設計(第3版)學習筆記11 內建js對象
內建對象是指由ECMAScript實現提供的、不依賴于宿主環(huán)境的對象,這些對象在程序運行之前就已經存在了2012-10-10基于JavaScript實現繼承機制之調用call()與apply()的方法詳解
本文將介紹兩種很類似于對象冒充的繼承方式,即使用call()和apply()方法2013-05-05JavaScript charCodeAt方法入門實例(用于取得指定位置字符的Unicode編碼)
這篇文章主要介紹了JavaScript charCodeAt方法入門實例,charCodeAt方法用于取得指定位置字符的Unicode編碼,需要的朋友可以參考下2014-10-10JavaScript簡介_動力節(jié)點Java學院整理
JavaScript是一種基于對象(Object)和事件驅動(EventDriven)并具有安全性能的腳本語言,javascript的出現使得網頁和用戶之間實現了一種實時性的,動態(tài)性的,交互性的關系,使網頁包含更多活躍的元素和更加精彩的內容2017-06-06