今天我们来了解我们的前端开发中，高级事件中必须要了解的三个内容
事件对象
含义：也是个对象，这个对象里有事件触发时的相关信息
事件对象在事件绑定的回调函数的第一个参数就是事件对象，e.target--就是事件的元素对象
按键事件常用属性
e.key
keyup 和 keydown
e.which--键码
单击事件常见属性
e.clientX/e.clientY --单击位置参照视口的坐标值
e.offsetX/e.offsetY --鼠标单击位置参照元素左上角的坐标值
e.screenX/e.screenY --鼠标单击位置参照屏幕左上角的坐标值
事件流
事件流指的是事件完整执行过程中的流动路径
事件捕获
-
从DOM的根元素开始去执行对应的事件
-
从外到内捕获子元素
- 1、子元素是否在父元素的范围之内
- 2、子元素里面是否还有更小的子元素，寻找到最小的一个没有更小的子元素为止
-
捕获是一定会有的
事件冒泡
-
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
-
事件冒泡的必要性 如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行
-
从内到外冒泡到父元素
- 跟事件捕获的方向顺序相反
-
事件冒泡是默认存在
阻止事件流动==阻止冒泡
-
语法：事件对象.stopPropagation（）
-
目的是为了冒泡模式下，把事件限制在当前元素即可，不影响到父元素
-
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
-
如果判断需要添加阻止冒泡？然后该怎么做？
- 先要明确那一块区域不能冒泡
- 需要阻止什么事件传递就给这块区域的最大盒子注册该事件
- 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()
阻止默认行为
- event.perventDefault（）
- 比如链接点击不跳转，表单域的不提交
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧。
原理
- 利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
优点
- 给父级元素加事件（可以提高性能）
我们怎么实现？
- 事件对象.target （e.target）可以获得真正触发事件的元素
XMind - Trial Version
