下面HTML代码

<div class="grandfather">
  <div class="father">
    <div class="son">
      点击
    </div>
  </div>
</div>//另设置有监听函数

点击的时候点击了谁？

儿子，爸爸，爷爷都点击了

调用顺序是什么？

W3C发布标准：
首先按照爷爷=>爸爸=>儿子的顺序看有没有监听函数（网景标准）称为“捕获”
再按照儿子=>爸爸=>爷爷的顺序看有无监听函数（IE标准）称为“冒泡”

冒泡与捕获过程

事件绑定api

• IE：

EventTarget.addEvent('onclick',fn)//冒泡

• 网景：

EventTarget.addEventListener('click',fn)//捕获

• W3C

EventTarget.addEventListener('click',fn,bool)//布尔类型不传为false会进行冒泡，为true则会进行捕获

监听代码中关于target和currentTarget

event.targrt //用户操作的元素
event.currentTarget //程序员监听的元素

例如：div>span{文字}，当用户点击文字；event.target就是span，event.currentTarget就是div

一个特例

event.addEventListener('click',()=>{
       console.log(1)
})
event.addEventListener('click',()=>{
       console.log(2)
},true)

那么先输出的是1还是2呢？
由于两者没有父级关系所以也不存在先捕获后冒泡的顺序，直接按代码的顺序执行。

取消冒泡

捕获的过程是不能够取消的

event.stopPropagation()//中断冒泡

不可阻止默认动作

有些事件不可取消冒泡
MDN中的scroll event
可以看到Bubbles和Cancelable
Bubbles的意思是该事件是否冒泡
Cancelable的意思是开发者能否取消冒泡

那么应该如何阻止scroll呢？

先有滚动才有滚动事件，要阻止滚动可阻止wheel（鼠标滚轮事件）和touchstart（手机触屏）的默认动作，使用CSS中overflow:hidden直接取消滚动条或者滚动条width:0w

自定义事件

浏览器自带100多种事件
开发者也可以在自带事件之外自定义事件，如：

button.addEventListener('click',()=>{
    const event = new CustomEvent('ydz',{
        detail:{name:'ydz',age:18},
        bubbles:true,
        cancelable:false
    })
    button.dispatchEvent(event)
})
div.addEventListener('ydz',(e)=>{
    console.log('ydz触发了')
    console.log(e.detail)
})

事件委托

什么叫事件委托？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

场景1
需要给100个按钮添加点击事件，怎么办？

<div id="div1">
    <button>click1</button>
    <button>click2</button>
    <button>click3</button>
    <button>click4</button>
    <button>click5</button>
</div> //设置有100个button

需要监听这100个button的祖先，等冒泡的时候判断target是不是这100个button中的一个

div1.addEventListener('click', (e) => {
    const t = e.target
    if (t.tagName.toLowerCase() === 'button') {
        console.log('button被点击')
        console.log('button的内容是' + t.textContent)
    }
})

场景2
需要监听目前不存咋的元素点击事件怎么办？
代码如上，事件委托

事件委托优点

• 省监听数量
• 可以监听动态元素

封装事件委托

要求

on('click','#div1','button',()=>{
    console.log('button被点击了')
})
//当用户点击div1里的元素，要求调用函数

封装事件委托

function on(eventType, element, selector, fn) {
    if (!(element instanceof Element)) {
        element = document.querySelector(element)
    }
    element.addEventListener(eventType, (e) => {
        const t = e.target
        if (t.match(selector)) {
            fn(e)
        }
    })
}