event事件传播规则

时间:2023-03-09 07:39:42
event事件传播规则

参考原文:https://my.oschina.net/u/1454562/blog/205010

event事件传播有三个阶段:捕获阶段、目标阶段、冒泡阶段

target.addEventListener(type, listener[, options]);

true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;

false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应时间。

html代码:

<div id='d'>
<p id='p'>
<span id='s'>Click Me!</span>
</p>
</div>

js代码:

var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s'); function onClickFn(event) {
var tagName = event.currentTarget.tagName;
var phase = event.eventPhase;
console.log(tagName, phase);
} div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true); span.addEventListener('click',function(){
console.log('span')
},true)

如果true:

(index):45 DIV 1
(index):45 P 1
(index):52 span

如果为false:

span
(index):45 P 3
(index):45 DIV 3