事件流
从页面中接受事件的顺序。
DOM2级流包含三个阶段
- 事件捕获
- 处于事件目标
- 事件冒泡
1，事件冒泡：
即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
冒泡是向上的
比如点击div1
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="div1">Click Me</div>
</body>
</html>
如果你点击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：
- <div>
- <body>
- <html>
- document
也就是说，click 事件首先在 <div> 元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。下图展示了事件冒泡的过程。
image
2，事件捕获：
与事件冒泡正好相反
从最不具体的节点到最具体的元素依次触发某个事件。
DOM1级事件处理程序
比如
btn.onclick=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
//只会alert(2)，这是DOM 1级 后面的会覆盖前面的
删除DOM1级的事件处理程序。需要用到null
btn.onclick=null
将事件处理程序设置为 null 之后，再单击按钮将不会有任何动作发生。
DOM2级事件模型
处理指定和删除事件处理程序的操作：
addEventListener() 和 removeEventListener()
都接受三个参数
要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
通过DOM2，可以给某个元素添加多个相同的事件。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.addEventListener("click", function(){
console.log("Hello world!");
}, false);
会依次触发，打印是id和Hello world
好处：为同一个元素添加多个事件处理程序。
移出事件removeEventListener()
注意：通过 addEventListener() 添加的匿名函数将无法移除，如下面的例子所示。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.removeEventListener("click", function(){ // 没有用！
console.log(this.id);
}, false);
看似会删除掉事件，但是第二个参数是不一样的。fn!=fn
那如何才能移出事件呢？
方法：将第二个参数改写为有名函数
var btn = document.getElementById("myBtn");
var fn1 = function(){
console.log(this.id);
};
btn.addEventListener("click",fn1, false);
btn.removeEventListener("click", fn1, false); // 有效！
这样三个参数就是一致的了，可以有效移出事件
网友评论