事件流

DOM事件流
三个阶段
捕获阶段 -> 目标阶段 -> 冒泡事件
捕获阶段 从外到内找目标的阶段
利用addEventListener（'事件类型', '事件处理程序', 'true为捕获，不写或false为冒泡事件'）
特点：在这个阶段，触发某个子元素的事件，其所有父元素上绑定的相同类型的事件都会被触发，且先执行父级事件
目标阶段 目标元素执行事件的过程
冒泡阶段 从内到外冒泡
on... 注册的事件只能是冒泡事件
利用addEventListener（'事件类型', '事件处理程序', 'true为捕获，不写或false为冒泡事件'）
特点：在这个阶段，触发某个子元素，其所有父元素上绑定的相同类型的事件都会被触发，先执行子元素事件
只有存在父子关系的元素并且绑定了相同的事件处理程序，才会产生事件流
在DOM树下不是父子关系的标签不存在DOM事件流
事件委托
事件委托的原理是事件冒泡的特点
事件委托的作用1
- 多个子元素绑定相同事件，把事件委托给父级元素，可以减少内存消耗
事件委托的作用2
- 动态给某个元素内部添加子元素，又期望新添加的子元素含有事件
阻止事件冒泡
event.stopPropagation() 阻止事件冒泡
给某个元素的事件处理程序添加 event.stopPropagation() 可以阻止事件冒泡
事件对象
event 事件对象
只有在事件处理程序中能用
event.target 触发事件的元素
事件处理程序中的 this 指向事件源 （绑定事件的元素）
阻止默认行为
event.preventDefault()
给某个元素的事件处理程序添加 event.preventDefault() 可以阻止默认行为
例如
a标签的默认跳转
右键菜单的使用
光标坐标
光标相对视口的坐标
e.clientX
e.clientY
光标相对文档的坐标（包含滚动条）
经常使用
e.pageX
e.pageY
光标相对于事件源的坐标
e.offsetX
e.offsetY
鼠标事件
鼠标移动
mousemove
鼠标在事件源中移动时触发
鼠标按下
mousedown
鼠标抬起
mouseup
click
cclick事件最后执行
先执行鼠标按下事件，再执行鼠标抬起事件，最后是点击事件
拖动图片
注意： 要设置需要拖动的元素为 绝对定位

阻止右键菜单事件


event.preventDefault()
在事件处理程序组添加，即可阻止事件发生