事件的执行阶段
- 捕获阶段（从body到目标元素的阶段）
- 目标阶段（找到当前的目标元素执行事件）
- 冒泡阶段（从目标元素到body的阶段）
事件的触发模式
冒泡模式（从目标元素执行到最外层的元素）（默认模式） (从里到外）
捕获模式（从最外层的元素执行到目标元素） （指定为捕获）
（从外到里）
禁止事件冒泡
主要是为了执行当前的事件时 不触发外层相同的事件
- stopPropagation event的方法
- cancelBubble赋值 true event的属性
- 兼容写法
默认行为
某些事件或者对应的标签在默认的特效 ，称为默认行为 如
- a标签回跳转
- img会拖动
- form表带的submit会提交
- contextmenu 会出现一个菜单栏
- ....
有些时候我们不需要这些行为，那么我们就可以将这些行为进行禁止
禁止默认行为
- preventDefault
e.preventDefault（）
- returnValue 赋值为false
e.returnValue=false
- 在处理函数内容直接返回false （一般放在处理函数最后）
return false
兼容写法
JavaScript中的三大家族
- offset家族
- offsetParent 偏移的父元素
- offsetWidth 当前元素的宽度（包含填充和边框）
- offsetHeight 当前元素的高度（包含填充和边框）
- offsetLeft 基于偏移的父元素的左偏移量
- offsetTop 基于偏移父元素的上偏移量
- client家族
- clientWidth 当前元素的宽度 （包含填充不包含边框）
- clientHeight 当前元素的高度 （包含填充不包含边框）
- clientTop 离上面边框的距离
- clientLeft 离左边边框的距离
- scroll 家族
- scrollTop 滚动栏离上面的距离
- scrollLeft 滚动栏离左边的距离
- scrollWidth 当前的元素的宽度 （包含填充和滚动距离）
- scrollHeight 当前的元素的高度 （包含填充 和滚动栏距离）
事件监听器（eventListener）
事件监听器，使用了观察者模式（observer）.它添加事件的一种方式 重点方法
- addEventListener 添加事件监听器
- removeEventListener 移除事件监听器 添加事件监听器
元素对象.addEventListener（事件名字符串，处理函数，是否冒泡）
移除事件监听器
如果对应的其中一个参数不相等 那么就不能移除
示例
dispatchEvent 派发事件 （执行事件）
- eventListener和属性指定事件的区别
- eventListener 一个事件可以指定多个处理函数，属性会覆盖
- eventListener可以设置是否捕获 属性指定不行
- eventListener添加的事件可以被移除 属性指定只能重新赋值 为null进行移除
- eventListener添加的事件名可以任意书写 ，由dispatchEvent来触发
拖拽
全局拖拽
拖拽的相关事件
- 按下事件 （nomousedown）
- 移动事件 （onmousemove）
- 弹起事件 （onmouseup）
思路
- 给拖拽的元素添加按下事件
- 在按下事件中记录鼠标在元素的位置（offsetX offsetY）
- 在按下事件内容给全局（document）添加移动事件
- 在全局的移动事件内记录每次移动的位置
- 用移动的位置减去按下的位置得到对应的定位的位置
- 在全局的移动事件内设置元素的定位
- 再按下的事件内容给全局（document）添加弹起事件
- 在弹起事件内容释放对应的移动事件和弹起事件
代码实现
局部拖拽
思路
- 给拖拽的元素 添加鼠标按下事件
- 在按下事件内获取按下的坐标 （offsetX、offsetY）
- 给区域元素添加鼠标移动事件
- 在移动事件内获取对应的坐标位 （pageX，pageY）
- 计算对应的定位的坐标（移动坐标位-按下的坐标位-区域元素离页面的坐标位置）
- 区间判断(大于最大位置 等于最大位置 小于0等于0）
- 设置对应的拖拽元素的位置
- 在鼠标按下事件中添加全局（document）的鼠标弹起事件
- 在弹起事件内释放对应的弹起事件和移动事件的内存（赋值为null）
