首先值得說一下,在事件處理、事件物件、阻止事件的傳播等方法或物件存在著瀏覽器相容性問題,開發過程中最好編寫成一個通用的事件處理工具,嗯,接下來我們一起來看看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
}
}
},上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#關於Eclipse去除js(JavaScript)驗證錯誤（詳細解答）
以上是JavaScript中的跨瀏覽器事件（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
