事件流
事件
事件就是在变成时系统内发生的动作或者发生的事情
- 单击
- 双击
- 鼠标放置
- 表单内容发生变化
- 拖拽
- 页面滚动
- 触发/失去焦点
- 键盘按下
- 提交表单
- ......
JS 中事件就是一个对象
DOM事件流
- 三个阶段
- 事件捕获阶段，处于目标阶段，事件冒泡阶段
- image.png
- 在捕获阶段和冒泡阶段分别可以对事件进行监听
事件监听函数
- 当事件发生时执行的函数
- 三种绑定方法
- 在 html 中绑定，尽量不用
- <div onclick="sayHello">点我</div>
- 给 dom 元素的 onclick 赋值
- $btn.onclick = function(e){console.log('点我')}
- 这个写法只能点击一次触发一次，相当于更改属性绑定的函数，那么每次点击的时候，只能触发一次属性
- 调用 dom 的 addEventListener 函数
- $btn.addEventListener('click', function(e){console.log('点我')}, true)
- 使用这个函数的一个好处就是，可以给一个元素绑定多个事件监听，即便是这个事件是相同事件，也可以点击一次多次触发，因为它写的方式就是调用函数，函数是可以多次调用的
- 在 html 中绑定，尽量不用
addEventListener
- target.addEventListener(type, listener, options)
- type：事件类型
- listener：事件处理方法
- options：可选，默认全是 false。{capture：是否捕获阶段监听，once：是否只监听一次，passive：是否忽略 preventDefault}
- target.addEventListener(type, listener, useCapture)
- useCapture：可选，true表示在捕获阶段调用 listener，false表示在冒泡阶段处理
- target.removeEventListener
- target.removeEventListener('click', handler)
- target.removeEventListener('click', handler, true)
阻止事件传播
- e.stopPropagation()
- 我们知道事件触发分为捕获阶段和冒泡阶段，并且会着一执行对应的事件，当我们在其中一个事件监听的时候，使用阻止事件传播，那么后续的事件就不会进行下去。
$('.child').addEventListener('click', function(e){
console.log('事件开始处理')
e.stopPropagation()
}, true)
阻止默认事件
- e.preventDefault()
- 链接不自动跳转
- 表单不自动提交
- 与passive选项的关系
- 移动端滚动性能优化
事件代理
什么是事件代理
- 事件绑定代理给父元素，由父元素根据事件来源统一处理
- 适用于可能会新增子元素场景
- 事件代理实际上是事件冒泡的应用
为什么用事件代理
- 我们又一系列的子元素，这些子元素都有相类似的事件，我们在刚开始就给这些元素添加这些事件
- 但是后面通过其他方式创建的新元素没有这些事件，只能在创建之后还给这个元素新添事件
- 换一个思路：我们部不对单个元素添加绑定，而是注意到父元素上，使用冒泡原理，将事件绑定在父元素上面
- 事件具有一个path属性，通过这个path属性，可以拿到对应的对象
- image.png
常见事件
- click：点击
- dblclick：双击左键
- mouseover：鼠标悬停，如果悬停在孩子身上就不执行
- mouseout：鼠标离开，离开到孩子身上，会执行
- mouseenter：只执行一次，如果里面是孩子，也只执行一次，更符合我们的预期
- mouseleave：只执行一次，如果里面是孩子，也只执行一次，更符合我们的预期
- hover：鼠标悬停事件
- focus：一般是表单拿到焦点
- blur：一般是表单失去焦点
- keyup：按键松开，使用起来并不方便
- keydown：按键按下，使用起来并不方便
- change：使用起来比较方便，内容变化就触发
- submit：form表单的提交事件
- scroll：滚动页面窗口的时候
- resize：调整页面大小的时候
- window.onload：资源全部加载完毕的时候
- DOMContentLoaded：页面的DOM全部加载完毕之后
- $('img').onload：图片加载完毕事件
