JS笔记【归纳】：DOM中的事件处理程序-CSDN博客

本文链接：https://blog.csdn.net/fspwz/article/details/45674051

在触发DOM上的某个时间是，会产生一个事件对象event，这个对象中包含着所有与时间有关的信息。包括导致事件的元素、事件的类型一急其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含于按下的键有关的信息。

在DOM上，有两种方法对事件对象进行处理。一个是位于DOM0级别的，一个则是位于DOM2级别的。下面我来详细阐明一下。

1、位于DOM 0 级别的事件对象处理。

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。可以通过直接设置属性来获得所需的操作。

ex.:

var btn = document.getElementById("mybtn");
btn.onclick = function() {
    alert(this.id);   //"mybtn"
};

如此便可设置元素的事件对象。

2、位于DOM 2级别的事件对象处理。（IE9、Firefox、Safari、Chrome和Opera支持。）

“DOM 2级事件”定义了两个方法，用于处理指定和删除时间处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且他们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。

ex.:

var btn = document.getElementById("mybtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);

3、IE事件处理程序。

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent().这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。

ex.:

var btn = document.getElementById("mybtn");
btn.attachEvent("onclick", function(){
    alert("clicked");
});

4、实现跨浏览器的事件处理程序。

在下面代码中，对浏览器进行了能力检测，通过针对不同的浏览器设置不同的方法来达到相同的处理。

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;
        }
    }

};

5、注意事项。

在JS中，事件流包括三个部分：（1）事件捕获阶段；（2）处于目标阶段；（3）事件冒泡阶段。

在我经过仔细研究后得出，之所以JS中会给出两个级别的DOM事件处理程序，主要是因为：

DOM 0级针对的是事件流中的“处于目标”阶段和事件冒泡阶段。（通过设置触发处理来达到目的）

DOM 2级针对的是事件流中的事件捕获阶段。（通过设置监听器来达到目的）

可以从下面的代码中看出端倪。

<!DOCTYPE html>
<html>
<head>
    <title>DOM Event Object Example</title>
</head>
<body>
    <input type="button" value="Click Me" id="myBtn" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert(event.eventPhase);   //2——“处于目标”阶段
        };
        
        document.body.addEventListener("click", function(event){
            alert(event.eventPhase);   //1——事件捕获阶段
        }, true);
        
        document.body.onclick = function(event){
            alert(event.eventPhase);   //3——事件冒泡阶段
        };

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