onclick和addEventListener('click')的區別(DOM0級事件和DOM2級區別)

最近在複習到DOM事件,(內容若是有錯誤,歡迎指正)

DOM0事件:常見的如onclick事件,DOM0事件每一個元素都有,包括window和document,這些事件一般所有是小寫

var btn=document.getElementById('btn');
//添加
btn.onclick=function(){
  alert(this.id) //btn
}
//刪除
btn.onclick=null;

DOM2事件只有兩個方法:

         addEventListener(事件名,事件處理程序,布爾值)

         removeEventListener(事件名,事件處理程序,布爾值)

DOM2事件參數分析:

         事件名:經常使用的事件名如click

         事件處理程序:addEventListener和removeEventListener的事件處理程序一致時,remove才能正確的刪除add註冊的事件,能夠看下面的例子

        布爾值:true是捕獲階段執行事件處理程序,false是冒泡階段執行事件處理程序(建議採用冒泡這樣兼容性更好,若是在事件到達目標元素以前截獲採用捕獲)

全部DOM節點都有這兩個方法.

/**指定相同的事件處理程序例子**/

/**錯誤寫法:事件處理程序指定不一致,致使沒法刪除事件**/
var btn1=document.getElementById('btn1');
//這兩個function是不一致的,雖然都是方法,但不是同一個
btn1.addEventListener('click',function(){
  alert(this.id)
},false);
//這裏事件刪除不成功,由於function和事件註冊的方法不是同一個
btn1.removeEventListener('click',function(){
  alert(this.id)
},false);


/**正確寫法**/
var handler=function(){
   alert(this.id)
}
btn1.addEventListener('click',handler,false);
//這裏事件刪除成功執行
btn1.removeEventListener('click',handler,false);

 

DOM0和DOM2的主要區別:

同一個元素綁定相同的DOM0級事件,後面的事件會覆蓋先定義的事件;而同一個元素綁定相同的DOM2級事件,事件會按順序執行;

DOM0級事件是默認冒泡執行的;DOM2級事件可指定是冒泡仍是捕獲執行

var btn=document.getElementById('btn');
//這兩個function順序執行,首先打出id,以後打出hello
btn.addEventListener('click',function(){
  alert(this.id)
},false);
btn.addEventListener('click',function(){
  alert('hello')
},false);


var btn1=document.getElementById('btn1');
//會覆蓋,只執行hello
btn1.onclick=function(){
  alert(this.id)
}
btn1.onclick=function(){
  alert('hello')
}