addEventListener() 事件监听

无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小demo。 
addEventListener() 用于向指定元素添加事件。 
可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 
语法： 
element.addEventListener(event,fn,useCaption ); 
参数说明：tr件，比如 click mouseenter mouseleave onclick onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup

 

 

fn 回调函数 、函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。 
当值为true，就是捕获传递。 
示例代码：

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>addEventListener</title>
 6     <script type="text/javascript" src="js/jquery-3.0.0.js"></script>
 7     <style type="text/css">
 8         #content{
 9             width: 100px;
10             height: 100px;
11             background: #f9f;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="content"></div>
17     <script type="text/javascript">
18         //addEventListener 用于向指定元素添加事件句柄
19         //可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件
20 
21         var content = document.getElementById("content");
22         content.addEventListener("click",function(){
23             //alert("支持此方法");
24             console.log("11");
25         },false)
26         content.addEventListener("click",function(){
27             console.log("22");
28             //add();
29         },false)
30         content.addEventListener("mouseenter",add,false);
31         function add(){
32             console.log("我和你");
33         }
34         content.removeEventListener("mouseenter",add,false);
35     </script>
36 </body>
37 </html>

 

posted @ 2021-11-11 23:04  aixuexi666888  阅读(290)  评论(0)  编辑  收藏  举报