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，就是捕获传递。
示例代码：

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

注意：

removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。
IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。