冒泡.md

事件冒泡、事件委托和事件捕获

冒泡

这个还是比较好理解的 不容易分清委托和捕获

内部冒泡 外部捕获

点击一个区域 最外层的区域先执行就是捕获， 最里面的先执行然后再一层一层执行外面的 那就是冒泡 （从小到大的泡泡嘛）

从document 或者说是 body的地方 先捕获（从外往内执行） 达到目标元素的时候，再从该目标元素开始冒泡（从小到大）

addEventListener的最后一个参数决定事件是在捕获还是在冒泡 如果是true 那么处理的函数会在捕获的时候就触发，反之会在冒泡阶段触发

示例代码:

var selector = document.querySelector.bind(document);
selector('div.outer').addEventListener('click', (e) => {
    console.log('outer clicked! ');
}, true)
selector('div.inner').addEventListener('click', (e) => {
    console.log('inner clicked! ');
}, false)
document.addEventListener('click', (e) => {
    console.log('document clicked! ');
}, true)


// 点击inner后：  document clicked! outer clicked! inner clicked! 

// **如果把outer的addEventListener中最后一个参数改为false**  
// 点击 inner 后 结果为  document clicked! inner clicked! outer clicked!  说明冒泡了
// 如果全是false 的话 那就是典型的冒泡了
// 全是true 那就是捕获 在最外面的先click到 然后到最里面 就是 d o i

如果添加事件是使用 el.onclick = function(){} 的方式的话 那么就是冒泡的模式

冒泡的应用

给document添加一个点击事件的话 那么任何元素的点击事件最后都会冒泡到这个事件处理器上并触发函数 除非前面的事件处理函数阻止了冒泡(e.stopPropagation(), 在这种情况下事件不会继续向上冒泡) e.stopPropagation()只能阻止事件在冒泡阶段的向上传播。 如果被点击的元素的父级元素或父父级.. 中有捕获的事件处理器(即添加事件时最后一个参数为true)的话 那么这个祖先元素的事件也会在事件捕获的阶段触发。

事件委托

利用事件冒泡的特性，将里面的事件给外层。