从《JavaScript高级程序设计第三版》中摘要出来的--事件处理程序-优快云博客

本文链接：https://blog.youkuaiyun.com/yuxiaoxia28/article/details/45851115

1、DOM事件流：

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

2、DOM2级事件处理程序

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

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

来看例子

<!DOCTYPE html>
<html>
<head>
    <title>DOM Level 2 Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <p>This example won't work in Internet Explorer.</p>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.addEventListener("click", function(){
            alert(this.id);
        }, false);
        btn.addEventListener("click", function(){
            alert("Hello world!");
        }, false);

    </script>
</body>
</html>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，但添加的匿名函数将无法移除。

支持DOM2级事件处理程序的有IE9、FireFox、Safari、Chrome和Opera

IE事件处理程序

Opera和IE8及更更早版本支持
IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。这两个方法接受两个参数：事件处理程序名称和处理程序函数。

3、跨浏览器的事件处理程序

var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    };

具体请参考《JavaScript高级程序设计第三版》