事件流

事件流描述的是从页面接受事件的顺序。但IE和Netscape开发团队提出了差不多是完全相反的事件流概念，IE是事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

事件冒泡

事件冒泡（event bubbling）–即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（document）。

1
2
3
4
5
6
<html>
<head></head>
<body>
    <div id="clickedDiv">Click!</div>
</body>
</html>

如果点击div元素，click事件的传播顺序：

-> -> -> document

事件捕获

事件捕获（event capturing）–即不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
如果点击div元素，click事件的传播顺序：document -> -> ->

DOM事件流

“DOM2级事件”规定事件流包括三个阶段：

  • 事件捕获阶段 – 为截获事件提供机会
  • 处于目标阶段 – 实际的目标接收到事件
  • 事件冒泡阶段 – 在这个阶段对事件做出响应
    在DOM事件流中，实际的目标（div）在捕获阶段不会接收到事件。意思就是在捕获阶段，事件从document到html再到body后就停止了。然后是“处于目标”阶段，事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

事件处理程序

事件处理程序–相应某个事件的函数。

html事件处理程序

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script>
function showMessage() {
    alert('Hello!');
}
</script>
</head>
<body>
    <div id="clickedDiv" onclick="showMessage()">Click!</div>
</body>
</html>

这种方式不够灵活，HTML和JavaScript代码紧密耦合。

DOM0级事件处理程序

1
2
3
4
5
6
var btn = document.getElementById('clickedDiv');
btn.onclick = function() {
    alert(this.id);//"clickedDiv",DOM0级方法指定的事件处理程序被认为是元素的方法，so this引用当前元素
}
btn.onclick = null;//删除事件处理程序

DOM2级事件处理程序

1
2
3
4
5
var btn = document.getElementById('clickedDiv');
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
//第三个参数：true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

DOM2级添加事件处理程序的好处是可以添加多个事件处理程序。
注意：通过addEventListener添加的事件处理程序只能使用removeEventListener来移除，且移除时传入的参数与添加处理程序时使用的参数相同，也就是说addEventListener添加的匿名函数将无法移除。因此要这样儿：

1
2
3
4
5
6
7
var btn = document.getElementById('clickedDiv');
var handler = function() {
    alert(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);//有效
//第三个参数：true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

IE级事件处理程序

1
2
3
4
5
6
7
var btn = document.getElementById('clickedDiv');
var handler = function() {
    alert(this === window);//true
}
btn.attachEvent("click", handler);
btn.detachEvent("click", handler);//有效
//所有attachEvent添加的事件处理程序都会被添加到冒泡阶段。

事件对象

event对象的currentTaget、target、this

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给目标元素，则三者包含相同的值。如果事件处理程序存在于按钮的父节点中（eg.document.body），那么这些值是不相同的。

event的preventDefault()、stopPropagation()、stopImmediatePropagation()方法

  • preventDefault()：取消事件的默认行为。如果cancelable属性=true，则可以使用该方法
  • stopPropagation()：取消事件的进一步捕获或冒泡，如果bubbles属性=true，则可以使用该方法
  • stopImmediatePropagation()：取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件新增）

###

主要事件类型

Click事件

Focus事件

Scroll事件

Touch事件

转：JavaScript：理解同步、异步和事件循环