关于事件处理那些事-js

事件的三个阶段：

第一个阶段:  捕获阶段

第二个阶段：执行当前点击的元素

第三个阶段：冒泡阶段

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 获取在当前页面的位置（下拉到页面顶部都算）

给个案例：

跟着鼠标飞的图片：