事件流程以及dom2级事件绑定

Posted 2020-11-16 maozo

事件流程分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

捕获阶段：事件从最顶层元素开始执行，一层层往下，直到精确元素。

目标阶段：事件在精确元素上执行。

冒泡阶段：事件从精确元素开始执行，一层层往上，直到顶层元素（注：高级浏览器的顶层元素是window，ie8以下的浏览器顶层元素是document）

 

 DOM2级事件绑定方式 

 高级浏览器绑定方式：

元素.addEventListener(type, handler, boolean);             //绑定

　　type 事件类型字符串  不带on

　　handler 事件处理函数

　　boolean 布尔值  如果值为true 该绑定是绑定到捕获阶段 否则绑定到冒泡阶段

元素.removeEventListener(type, handler, boolean);      //移除绑定

　　type 事件类型字符串  不带on

　　handler 事件处理函数

　　boolean 布尔值  如果值为true 是移除捕获阶段 否则移除冒泡阶段

IE8以下浏览器绑定方式（不支持addEventListener ）

元素.attachEvent(type, handler)            //绑定

　　type 事件类型字符串  带on

　　handler 事件处理函数

元素.detachEvent(type, handler)         //移除绑定

　　type 事件类型字符串  带on

　　handler 事件处理函数

（注：ie8以下浏览器绑定方式没有第三个参数，表示不能绑定到捕获阶段）

 

dom2级事件可以重复绑定，在高级浏览器中的执行顺序是从上至下。在ie8以下浏览器中是倒叙执行，但是当attachEvent和dom0级一起执行时，会先执行0级，然后再倒叙执行。