下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:课课家教育     来源: https://www.cnblogs.com/maozo/p/11610036.html点击数:746发布时间: 2020-03-05 12:23:44

标签: DOMJavascriptwindow

Web开发

  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。

赞(9)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程