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