web前端：事件流程以及dom2级事件绑定

作者:课课家教育更新于： 2020-03-05 11:57:31

　　Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在Javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的Dhtml格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

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

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

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

　　冒泡阶段：事件从精确元素开始执行，一层层往上，直到顶层元素（注：高级浏览器的顶层元素是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级，然后再倒叙执行。

　　文档对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。