on 和 addEventListener 的区别

末蓝、 2021-11-05 06:32 372阅读 0赞

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高级程序设计）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

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

> addEventListener用法:形式：addEventListener(event,funtionName,useCapture)
> 
> 参数：    event:事件的类型如 “click”    
> 
>               funtionName：方法名   
> 
>               useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。            true - 事件句柄在捕获阶段执                              行            false- false- 默认。事件句柄在冒泡阶段执行

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20211104/eaa4826fb0a1402a83bf5617521ba30d.png