1. 点击事件

1.1 W3C

2002年，W3C发布标准文档名为DOM Level 2 Events Specification，规定浏览器应该同时支持两种调用顺序首先按爷爷一爸爸一儿子顺序看有没有函数监听然后按儿子=>爸爸=>爷爷顺序看有没有函数监听有监听函数就调用，并提供事件信息，没有就跳过

1.2 例子

1.3 术语

事件捕获(网景)：从外向内找监听函数
事件冒泡(IE)：从内向外找监听函数

1.4 addEventListener

事件绑定API

IE 5*: baba.attachEvent('onclick', fn) //冒泡
网景: baba.addEventListener('click',fn) //捕获
W3C: baba.addEventListener(click, fn, bool)

如果bool不传或为falsy

fn走冒泡，即当浏览器在冒泡阶段发现baba, 有fn监听函数，就会调用fn，并提供事件信息
如果bool为true fn走捕获，即当浏览器在捕获阶段发现baba,有fn监听函数，就会调用fn，并提供事件信息

1.5 W3C事件模型

先捕获（先父节点，再子节点）再冒泡（先子节点，再父节点）注意e对象被传给所有监听函数，事件结束后e对象就不存在了

div.addEventListener('click', fn)//冒泡
div.addEventListener('click', fn, true)//捕获

DOM事件传播的三个阶段：捕获阶段、目标阶段、冒泡阶段

1.6 target 和 currentTarget的区别

e.target用户操作的元素
e.currentTarget 程序员监听的元素

<div>
	<span>这是文字</span>
</div>

程序员监听div，用户实际点击的是文字，e.target就是span，e.currentTarget就是div

1.7 取消冒泡

捕获不可取消，但冒泡可以取消， **e.stopPropagation()**可中断冒泡，浏览器不再向上走，一般用于封装某些独立的组件

1.8 不可阻止默认动作

有些事件不能阻止默认动作，MDN搜索scroll event，看到Bubbles和Cancelable

Bubbles的意思是该事件是否冒泡，所有冒泡都可取消
Cancelable的意思是开发者是否可以旧止默认事件，Cancelable与冒泡无关注：推荐看MDN英文版，中文版内容不全

1.9 其他知识点

如何阻止滚动

scroll事件**不可阻止默认动作** 阻止scroll默认动作没用，因先有滚动才有滚动事件要阻止滚动，可阻止wheel和touchstart的默认动作注意你需要找准滚动条所在的元素，示例但是滚动条还能用，可用CSS让滚动条width: 0
CSS也行使用overflow: hidden可以直接取消滚动条但此时JS依然可以修改scrollTop

// 网页版取消滚动
x.addEventListener('wheel',(e) =>{
	e.preventDefault()
}) 
// 取消滚动条 CSS样式
::-webkit-scrollbar{
width: 0 !important
}
// 手机版
x.addEventListener('touchstart',(e) =>{
	e.preventDefault()
})

DOM事件模型