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')
}