原生事件繫結(跨瀏覽器),dom0和dom2的區別?
阿新 • • 發佈:2019-01-25
1. DOM0級事件處理程式(屬性繫結,相容性好)
通過javascript制定事件處理程式的傳統方式,將一個函式賦值給一個事件處理程式屬性。特點是簡單,跨瀏覽器。var btn = document.getElementById("btn");
btn.onclick = function(){
alert('cliked');
}
dom0級方法制定的事件處理程式被認為是元素的方法,因此這個時候事件處理程式是在元素的作用域中執行,this指向當前元素。
btn.onclick = null; //刪除事件處理程式
2. DOM2級事件處理程式(函式繫結,相容性不好)
1. 非IE
DOM2級規範以一種符合邏輯的方式來標準化DOM事件,IE9,Firefox,Opera,Safari,Chrome全部已經實現了"DOM2級事件"模組的核心部分。IE8是最後一個仍然使用其專有事件系統的主要瀏覽器。
addEventListener()事件繫結
引數:
要繫結的事件名
作為事件處理的函式
布林值:true在捕獲階段呼叫事件處理程式;false在冒泡階段呼叫
removeEventListener()
事件刪除
引數:
要刪除的事件名
作為事件處理的函式
布林值:true在捕獲階段呼叫事件處理程式;false在冒泡階段呼叫
例如:
//事件繫結
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id); //該函式在其依附的元素的作用域中執行。
},false);
//事件移除
var btn = document.getElementById("btn");
var handler = function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);//移除
可以新增多個事件處理程式,並且按照新增她們的順序觸發。移除事件傳入的引數與新增處理程式時使用的引數相同,新增事件時如果使用匿名函式將無法刪除
2. IE事件處理程式
事件處理程式會在全域性作用域中執行,因此this指向window物件。為一個物件新增兩個相同的事件,事件處理程式的順序是按照新增相反順序進行處理
attachEvent()
事件繫結
引數:
事件處理程式名稱
事件處理函式
detachEvent()
事件移除
引數:
事件處理程式名稱
事件處理函式
事件處理程式都被新增到冒泡階段
3. 跨瀏覽器的事件處理程式
var outer = document.getElementById("outer"); var center = document.getElementById("center"); var inner = document.getElementById("inner"); function handler(){ alert(this.id); } //事件繫結 IE/firefox瀏覽器 eventUtil.bind(inner,"click",handler); //事件解綁 eventUtil.unbind(inner,"click",handler);
var eventUtil = {
/**
@param src事件源,type事件型別,fn事件處理函式
*/
bind:function(src,type,fn){
if(src.addEventListener){
src.addEventListener(type,fn,false);
}else if(src.attachEvent){
src.attachEvent("on"+type,fn);
}else{
src["on"+type] = fn;
}
},
unbind:function(src,type,fn){
if(src.removeEventListener){
src.removeEventListener(type,fn,false);
}else if(src.detachEvent){
src.detachEvent("on"+type,fn);
}else {
src["on"+type] = null;
}
}
};
4.區別:
如果定義了兩個dom0級事件,dom0級事件會覆蓋
dom2不會覆蓋,會依次執行
dom0和dom2可以共存,不互相覆蓋,但是dom0之間依然會覆蓋