javascript

JS绑定事件和移除事件的处理方法

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>  
<html>  
<head> 
    <title>摇一摇</title>  
</head>  
  
<script>  
    document.addEventListener("mousedown", mouse, false);//点击鼠标时触发事件  
    document.addEventListener("keydown", key, false);//按下键盘按键时触发事件  
      
    function mouse(){  
        alert('ddd');  
    }  
    function key(){  
        document.removeEventListener("mousedown", mouse, false);  
        alert('xxx');  
    }     
</script>  
<body>  
</body>  
</html>

由于IE只支持事件冒泡，所以同大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

注意：IE 8及更早IE版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>

<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}

function myFunction() {
    alert("Hello World!");
}
</script>

注：只有通过addEventListener()添加的事件，使用removeEventListener()移除该事件才有效。

jQuery与之对应的函数是：bind()方法 和 unbind()方法

延伸阅读：jQuery禁用a标签和禁用按钮click点击的方法