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