下面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)
}
})
}
