1. 程式人生 > >原生事件繫結(跨瀏覽器),dom0和dom2的區別?

原生事件繫結(跨瀏覽器),dom0和dom2的區別?

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之間依然會覆蓋