当一个事件触发了之后,它会在父、子元素之间进行传播。
一、 事件传播的三个阶段
捕获阶段:从window对象一直传播到目标节点
目标阶段:在目标节点上触发事件
冒泡阶段:从目标阶段冒泡回window对象
JavaScript中的事件流是指事件触发的顺序,事件传播有两种方式,分别是事件冒泡和事件捕获。
二、 在HTML元素节点上添加事件监听函数
用addEventListener给节点添加监听函数,代码如下。
<div>
<p>点击触发事件</p>
</div>
<script>
var p = $('p')[0];
var div = $('div')[0];
var phase = {
1: '捕获',
2: '目标',
3: '冒泡'
}
var fn = function(event) {
console.log(arguments[0])
var tag = event.currentTarget.tagName;
var phaseName = phase[event.eventPhase];
console.log("事件信息:");
console.log(event)
console.log("当前"+tag+"元素正处于"+phaseName+"阶段");
}
//监听函数是否在捕获阶段触发,默认为false,表示只在冒泡阶段监听
p.addEventListener('click',fn,false);
div.addEventListener('click',fn,false);
p.addEventListener('click',fn,true);
div.addEventListener('click',fn,true);
</script>
- 当参数设为false时,表示只在冒泡阶段监听,所以当事件从p标签向上冒泡到div标签时,会在两个节点上分别触发一次click事件。控制台输出信息:
- 当参数设为true时,表示在捕获阶段监听。控制台输出信息:
从上述的例子中,我们可以看到捕获阶段和冒泡阶段事件传播的方向