前端学习-js事件之事件冒泡、事件捕获

一、什么是事件

js创建动态页面，事件是可以被JavaScript侦测到的行为。网页中每个元素都可以产生某些可以触发JavaScript函数或者程序的事件。

二、事件流

事件冒泡和事件捕获分别是微软和网景提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id ='parent'>
    <p id = 'child'></p>
</div>复制代码

当上面的parent和child分别有一个点击事件的时候，到底哪个事件会先执行呢？

为了解决这个问题，微软和网景分别提出了两种相反的概念——事件冒泡和事件捕获。

1.事件冒泡

当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

因此可以看出，上面的事件执行顺序：p ->div -> body -> html -> document

2.事件捕获

网景提出了一种与事件冒泡截然相反的事件流，就是事件会从最外层开始，一直到具体的元素，执行顺序 document -> html -> body -> div -> p

3.W3C事件阶段

当一个DOM 事件被触发的时候，它并不会在目标对象上只执行一次，它会经历三个阶段。

事件一开始从根节点流向目标对象（事件捕获），然后在目标对象上触发(目标阶段)，之后回溯到文档的根节点（事件冒泡）。

事件捕获阶段

事件从文档的根节点出发，随着dom节点向目标节点流去，途径中间的各个dom节点，并在各个节点上触发捕获事件，直到目标节点上。捕获阶段只要是建立捕获路径

一般情况下，我们很少使用事件捕获，但是我们可以使用它对事件禁止操作

let el = getElementById('id')
el.addEventListener('click', (e) => {
    e.stopPropagation()
}, true)复制代码

目标阶段

当事件到达目标节点时候，事件就到达了目标阶段，事件在目标阶段被触发，然后回溯到根节点上。

一般情况下，对于目标节点会嵌套多层子节点，我们鼠标一般都是点在子节点上，这个时候可以使用事件冒泡对上层目标节点设置事件，事件冒泡可以触发目标节点的监听事件，并触发该事件的回调函数

事件冒泡阶段

 当事件到达目标节点后，触发这个事件之后，并不会随之终止，他会沿着dom节点一层一层的向上冒泡，知道最外层的根节点，直到document节点。也就是说该目标节点对应的事件会再其父节点上一层一层的触发，绝大多数事件都会冒泡，当然也有一些事件不会冒泡。

二、事件冒泡兼容性写法

function cBubble(e) {
    if (e.stopPropagation){
        e.stopPropagation()
    } else { // ie 6/7/8
        e.cancelBubble = true
    }

}复制代码

 三、阻止浏览器默认行为

function cDefault(e) {
    if (e.preventDefault) {
        e.preventDefault()
    } else {
        e.returnValue = false
    }
}复制代码

四、事件捕获兼容性处理

function addEvent(obj, type, fn) {
    if (typeof obj.addEventListener !== 'undefined') {
        obj.addEventListener(type, fn, false)
    } else {
        obj.attachEvent(`on${type}`, function() {
            fn.call(obj, arguments)
        })
    }
}复制代码