您的位置：首页 > Web前端 > JavaScript

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

2015-05-12 19:52 531 查看

在触发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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航