Dom基础（三）:事件冒泡，事件委托（事件代理）和事件捕获

javascript中的addEventListener(事件名，回调，布尔)

其中第三个参数默认为false-事件冒泡，true为事件捕获

二者区别：

• 事件冒泡：目标元素事件先触发，然后父元素事件触发
• 事件捕获：父元素事件先触发，然后目标元素事件触发

 1 
 2     

 3         a1
 4         a2
 5         a3
 6         a4
 7         点击添加一个a标签
 8     
 9 
10 

事件委托是利用事件冒泡原理，把事件监听绑定在元素的父级上。当元素被点击时，父级上绑定的点击事件就会被触发，事件触发函数里通过判断 e.target 上的 data-name 或 class 等标识来执行不同的逻辑。

优点：可以减少浏览器内存占用，提高代码整洁度

    

        a1
        a2
        a3
        a4
        点击添加一个a标签
    

 阻止事件冒泡和默认事件

event.preventDefault()可以阻止如a链接等默认行为

event.stopPropagation()可以阻止事件继续冒泡

手写一个事件函数

 1 //通用绑定事件
 2     function bindEvent(elem, type, selector, fn) {
 3         //如果fn为null则证明这是普通事件
 4         if(fn == null) {
 5             fn = selector
 6             selector = null
 7         }
 8         elem.addEventListener(type, event =>{
 9             const target = event.target
10             //如果selector存在证明他是事件委托
11             if(selector) {
12                 if(target.matches(selector)) {
13                     fn.call(target, event)
14                 }
15             }else {
16                 fn.call(target, event)
17             }
18         })
19     }