addEventListener() 事件監(jiān)聽

光年之外_殊拓 2018-08-15

展開全文

無意間有人問到了，這個方法，我就學了一下，順便敲了一個小demo。
addEventListener() 用于向指定元素添加事件。
可以向一個元素添加多次事件或者多次不同事件，后面的事件是不會覆蓋前面的。
語法：
element.addEventListener(event,fn,useCaption );
參數(shù)說明：tr件，比如 click mouseenter mouseleave onclick onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup

fn 回調(diào)函數(shù) 、函數(shù)
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() 不能移除匿名函數(shù)，像上面add()這種是可以的。
IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),對于這類瀏覽器我們可以使用detachEvent()來移除事件。