`节点之中有一个`
`节点。
如果对这两个节点,都设置`click`事件的监听函数(每个节点的捕获阶段和冒泡阶段,各设置一个监听函数),共计设置四个监听函数。然后,对`
`点击,`click`事件会触发四次。
```javascript
var phases = {
1: 'capture',
2: 'target',
3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);
function callback(event) {
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];
console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}
// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'
```
上面代码表示,`click`事件被触发了四次:`
`节点的捕获阶段和冒泡阶段各1次,`
`节点的目标阶段触发了2次。
1. 捕获阶段:事件从`
`向`
`传播时,触发`
`的`click`事件;
2. 目标阶段:事件从`
`到达`
`时,触发`
`的`click`事件;
3. 冒泡阶段:事件从`
`传回`
`时,再次触发`
`的`click`事件。
其中,`
`节点有两个监听函数(`addEventListener`方法第三个参数的不同,会导致绑定两个监听函数),因此它们都会因为`click`事件触发一次。所以,`
`会在`target`阶段有两次输出。
注意,浏览器总是假定`click`事件的目标节点,就是点击位置嵌套最深的那个节点(本例是`
`节点里面的`
`节点)。所以,`
`节点的捕获阶段和冒泡阶段,都会显示为`target`阶段。
事件传播的最上层对象是`window`,接着依次是`document`,`html`(`document.documentElement`)和`body`(`document.body`)。也就是说,上例的事件传播顺序,在捕获阶段依次为`window`、`document`、`html`、`body`、`div`、`p`,在冒泡阶段依次为`p`、`div`、`body`、`html`、`document`、`window`。
## 事件的代理
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。
```javascript
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
```
上面代码中,`click`事件的监听函数定义在`
`节点,但是实际上,它处理的是子节点`- `的`click`事件。这样做的好处是,只要定义一个监听函数,就能处理多个子节点的事件,而不用在每个`
- `节点上定义监听函数。而且以后再添加子节点,监听函数依然有效。
如果希望事件到某个节点为止,不再传播,可以使用事件对象的`stopPropagation`方法。
```javascript
// 事件传播到 p 元素后,就不再向下传播了
p.addEventListener('click', function (event) {
event.stopPropagation();
}, true);
// 事件冒泡到 p 元素后,就不再向上冒泡了
p.addEventListener('click', function (event) {
event.stopPropagation();
}, false);
```
上面代码中,`stopPropagation`方法分别在捕获阶段和冒泡阶段,阻止了事件的传播。
但是,`stopPropagation`方法只会阻止事件的传播,不会阻止该事件触发`
`节点的其他`click`事件的监听函数。也就是说,不是彻底取消`click`事件。
```javascript
p.addEventListener('click', function (event) {
event.stopPropagation();
console.log(1);
});
p.addEventListener('click', function(event) {
// 会触发
console.log(2);
});
```
上面代码中,`p`元素绑定了两个`click`事件的监听函数。`stopPropagation`方法只能阻止这个事件的传播,不能取消这个事件,因此,第二个监听函数会触发。输出结果会先是1,然后是2。
如果想要彻底取消该事件,不再触发后面所有`click`的监听函数,可以使用`stopImmediatePropagation`方法。
```javascript
p.addEventListener('click', function (event) {
event.stopImmediatePropagation();
console.log(1);
});
p.addEventListener('click', function(event) {
// 不会被触发
console.log(2);
});
```
上面代码中,`stopImmediatePropagation`方法可以彻底取消这个事件,使得后面绑定的所有`click`监听函数都不再触发。所以,只会输出1,不会输出2。