事件的三个阶段:
第一个阶段: 捕获阶段
第二个阶段:执行当前点击的元素
第三个阶段:冒泡阶段
e.eventPhase 获取事件阶段:(取值 1,2,3)
但能看到的就只有 第一阶段 和 第三阶段
事件冒泡,也叫事件委托 ,冒泡的作用就是事件委托
下面看一段代码:、
从代码中可以看到我们给‘li’,‘办了一个换背景颜色的事情’ ,但事情委托给了它的父节点‘ul'办事(onclick)
‘e’是事件参数(事件对象):当事件发生的时候,可以获取一些事件相关的数据获取当前点击的li
e.target 处理兼容性问题处理: e = e || e.srcElement;
//阻止冒泡 取消冒泡
标准的DOM方法
e.stopPropadation()
非标准方式 老版本的IE支持
e.canceBubble();
e.target 和 e.curentTarget :
e.target 是真正触发事件的对象 ; e.curentTarget 和this一样 , 获取处理函数所属的对象;
获取事件名称 e.type :
e.type的使用场景
可以给多个事件,指向同一个函数,避免多次注册事件,节省内存
代码案例:
获取鼠标当前位置(坐标):
e.clientX ;e.clientY 获取鼠标在浏览器的可视区域的坐标
e.pageX ; e.pageY 获取在当前页面的位置(下拉到页面顶部都算)
给个案例:
跟着鼠标飞的图片: