关于addEventListener和handlerEvent方法

wangjunqiao 2021-08-05 原文

1. addEventListener和removeEventListener定义:

addEventListener()方法用于向指定的对象中添加事件句柄;使用removeEventListener()方法来移除addEventListener()方法添加的事件句柄(注意：移除的方法必须为同一个方法)。

支持的浏览器(以上的版本)：

2.调用方法

element.addEventListener(event, function, useCapture)

参数说明:

event:必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。

function：必须。指定要事件触发时执行的函数或者包含handlerEvent方法的对象。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。

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

3.DOM支持的版本

　　DOM Level 2 Events

　　该接口的说明：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

4.实例演示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>addEventListener</title>
 5     <script type="text/javascript">
 6         var Load = {
 7             handleEvent:function (event) {
 8                 console.log("handleEvent");
 9                 console.log(event);
10                 console.log(event.type);
11                 // body...
12 
13             }
14         };
15 
16         function ClickListener(){
17             console.log("ClickListener function");
18         }
19         window.addEventListener("DOMContentLoaded",Load,false);
20         window.addEventListener("click",ClickListener,false);
21         
22     </script>
23 </head>
24 <body>
25 
26 <a href="javascript:void(0);"  id="btn" name="btn">点击</a>
27 </body>
28 </html>