2019-11-04 JS 事件冒泡和捕获

联系：

都是事件触发时序的问题
绑定事件方法（addEventListener）的第三个参数是控制事件触发顺序的；
默认为false，即事件冒泡；如果为true，即事件捕获。

区别：

事件冒泡：从触发事件的目标节点一直到document节点，是从下而上的触发事件；

事件冒泡

事件捕获：从document节点一直到触发事件的目标节点，是从上而下的触发事件。

事件捕获

//addEventListener绑定事件的第三个参数默认为true
        document.getElementById("#元素").addEventListener("click", function () {
            console.log( this.id)
        },true)

阻止事件冒泡：

e.stopPropagation();

一般HTML页面的布局结构：

document -> html -> body -> div -> 目标元素

TIPS：

e.target 表示在事件冒泡中触发事件的源元素。
并且e.target有很多属性可操作：

• e.target.nodeName //获取事件触发元素标签的name
• e.target.id //获取事件触发元素的id
• e.target.className //获取事件触发元素的className
• e.target.innerHTML //获取事件触发元素的内容