on 和 addEventListener 的区别

onclick用法:

let obj=document.getElementsByClassName('head')[0]
   let obj1=document.getElementsByClassName('head1')[0]
   obj.onclick=function(){
     alert("啦啦1");
   };
   //注册第二个点击事件
   obj.onclick=function(){
    alert("啦啦2");
   }; 

上文会只弹出啦啦2 后者覆盖前者

addEventListener点击事件:

<div id="abc" class="head" style="width:100px;height:100px;border:2px solid #ddd">
                <div  class="head1" style="width:50px;height:50px;border:2px solid red">
                </div>
        </div>
 let obj=document.getElementsByClassName('head')[0]
   let obj1=document.getElementsByClassName('head1')[0]
obj.addEventListener("click",function(){
    alert("啦啦");
},true);//true是捕获期间执行啦  由外到内呗
//注册第二个点击事件
obj1.addEventListener("click",function(){
    alert("啾啾");
});

用addEventListener会连续输出： 啦啦 啾啾   不会覆盖  useCapture(第三个参数): 默认值为false（即 使用事件冒泡）。

 

DOM事件流如图（剪自javascript高级程序设计）：

 

由图可知捕获过程要先于冒泡过程

当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

addEventListener用法:形式：addEventListener(event,funtionName,useCapture)

参数：    event:事件的类型如 “click”    

              funtionName：方法名   

              useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。            true - 事件句柄在捕获阶段执                              行            false- false- 默认。事件句柄在冒泡阶段执行

 addEventListener三个参数:事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。