on 和 addEventListener 的区别

Posted 2023-04-23

参考技术A 第一种：

第二种：

第三种：当函数fn有参数的情况下使用匿名函数来传参：

形式 ：addEventListener(event,funtionName,useCapture)

参数：

     event: 事件的类型如 “click”

     funtionName： 方法名

     useCapture(可选)： 布尔值，指定事件是否在捕获或冒泡阶段执行。

            true - 事件句柄在捕获阶段执行

            false- false- 默认。事件句柄在冒泡阶段执行

写法：

第一种：

第二种，没参数可以直接写函数名

第三种：函数有参数时需要使用匿名函数来传递参数

1.on事件会被后面的on的事件覆盖

以onclick为例：

最终会只有弹框输出：

啦啦

这样会连续输出：

啦啦

啾啾

1.特别说明addEventListener不被 IE9 以下兼容，IE9以下用使用 addEvent()

obj.addEvent( event , funtionName );

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）

DOM绑定事件处理函数区别

//非IE事件绑定
document.getElementById("mian").addEventListener(‘click‘,function(e){...},false);
window.addEventListener(‘load‘,function(e){...},false);

//IE事件绑定
document.getElementById("mian").attachEvent(‘onclick‘,function(e){...})；
 window.attachEvent(‘onload‘,function(e){...});

注意
1.IE是不支持addEventListener事件的，只支持attachEvent
2.false:冒泡，true:捕获