再谈BOM和DOM(4):DOM0/DOM2事件处理分析

JavaScript能够让网站对用户的各种操作及时做出“反馈”，响应用户交互行为，而这些就是：DOM，事件以及事件处理

  • DOM就是操作的元素，这个看《再谈BOM和DOM(1):BOM与DOM概述》

  • 事件就是用户或浏览器自身执行的某种动作。比如click,mouseup,keydown,mouseover等都是事件的名字。

  • 事件监听器就是响应某个事件的函数就叫事件处理程序（），事件处理程序以on开头，因此click的事件处理程序就是onclick 或addEventListener

一个完整的事件系统，通常存在以下三个角色：

  • 事件对象，用于储存事件的状态。

  • 事件源对象，当前事件在操作的对象，如元素节点，文档对象，window对象，XMLHttpRequest对象等。

  • 事件监听器，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。在IE中，事件对象恒为全局属性window.event的分身。

DOM0级 事件监听

DOM 0级事件监听：把一个函数赋值给一个事件的处理程序属性

在w3c没有把其DOM 模型引入网页时，netscape与微软已经逼不及待到快他们熟悉的语言中把相关的DOM模型搞进来了。这其实也怪javascript之父忙于把抄袭其他语言，忽略了自身事件系统的建设。从此世界被划分为两大阵营了。

双方都设计两种绑定事件的方法，无侵入式与侵入式。你可以说内联式与非内联式的区别。

侵入式：

<input name="ruby" onclick="alert(this.nam)" />

“HTML 的 on- 属性”，违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工，因此不推荐使用(回顾下下：三层分离——做表现行为结构相分离)。

无侵入式

var btn2=document.getElementById('btn2');//获得btn2按钮对象
btn2.onclick=function(){}//给btn2添加onclick属性，属性又触发了一个事件处理程序

这种是它们都完成了各自的DOM模型，实现对元素节点的索引机制之后的事了。这方面更详细的历程，可参看《javascript事件系统的发展史》

为什么没有DOM 史话演绎

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

Javascriptd的早期版本向程序员提供了查询和操控Web文档某些实际内容（主要是图像和表单）的手段。因为Javascript预先定义了“images”和“forms”等术语。

在的人们通常把这种试验性质的初级DOM称为“第0级DOM”（DOM Level 0）。在还未形成统一标准的初级阶段，“第0级DOM”的常见用途是翻转图片和验证表单数据。

Netscape和微软公司各自推出第四代浏览器产品以后，(Netscape Navigator 4发布于1997年6月，IE 4发布于1997年10月) ，DOM开始遇到麻烦，陷入困境。NN4和IE4浏览器使用的是两种不兼容的DOM。换句话说，虽然浏览器制造商的目标一样，但他们解决DOM问题时采用的办法却完全不同。

就在浏览器制造商以DOM为武器展开营销大战的同时，W3C不事声张的结合大家的优点推出了一个标准化的DOM。令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并与1998年10月完成了“第一级DOM”（DOM Level1）。

为什么没有DOM0及DOM1 事件

我们的确定标准了是没有DOM0级的。所谓DOM0级只是DOM历史坐标中的一个参照点而已。

具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。

在平时阅读的时候可能会读到DOM0级(DOM Level0)的字眼。实际上，DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐标中的一个参照点而已，具体说呢，DOM0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML..大概2000年的时候争论过DOM0的问题，最后结论大概是，没有官方形成此标准.。

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型 

这里顺手安利一下《ECMAScript进化史(1):话说Web脚本语言王者JavaScript的加冕历史》、《浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战》

DOM2级 事件处理程序

DOM2开始推崇三层分离：

  1. DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；

  2. DOM事件（DOM Events）：定义了事件和事件处理的接口；

  3. DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；

事件与样式 基于 DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法–在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法–在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。

DOM 2级事件定义了两个方法，用于指定和删除事件处理程序的操作。addEventListener()和removeEventListener()

对于绑定事件，ie低版本的浏览器是用attachEvent，而高版本ie和标准浏览器用的是addEventListener。

attachEvent不能指定绑定事件发生在捕获阶段还是冒泡阶段，它只能将事件绑定到冒泡阶段，但是并不意味这低版本的ie没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程无法通过程序控制。

实事件的兼容性问题特别的多，比如获取事件对象的方式、绑定和解除绑定事件的方式、目标元素的获取方式等等，由于古老的浏览器现在基本被淘汰，所以也没有必要讲了。

事件流

什么是事件流：大白话的说就比如我在页面上点击鼠标右键，这个右键如何反应到页面上，这就是一个事件流的过程

在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段：

  • 捕获阶段 --- 从window元素开始发生，一直到目标元素

  • 目标阶段 --- 事件触发

  • 冒泡阶段 --- 从目前元素开始发生，一直到window元素

事件模型

  • IE中采用的事件流是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。

    事件冒泡示意图

  • Netscapte采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。

    事件捕获示意图

  • 在dom时代，兼容了二者

    DOM事件流

 

 

 

addEventListener()和removeEventListener()

在DOM中，addEventListener()和removeEventListener()用来分配和移除事件处理函数，与IE不同的是，这些方法需要三个参数：

  • 事件名称(如click)

  • 要分配的函数（第一个参数Event 对象代表事件的状态）

  • 处理函数是用于冒泡阶段(false)还是捕获阶段(true)，默认为冒泡阶段false  

[object].addEventListener("name_of_event",fnhander,bcapture)  

[object].removeEventListener("name_of_event",fnhander,bcapture)  

oDiv.addEventListener("onclick", fnClick, false);  //添加事件处理函数 
oDiv.addEventListener("onclick", fnClickAnother, false);  // 与IE一样，可以添加多个事件处理函数 
oDiv.removeEventListener("onclick", fnClick, false);  //移除事件处理函数

如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地将这个事件处理函数删除  

oDiv.onclick = fnClick;  
oDiv.onclick = fnClickAnother;  //使用直接赋值，后续的事件处理函数会覆盖前面的处理函数  oDiv.onclick = fnClick; 
oDiv.addEventListener("onclick", fnClickAnother, false);  //会按顺序进行调用，不会覆盖

 

指定事件执行阶段

elem.addEventListener("eventType", fn , boolean);

参数说明:

  • 事件类型

  • 函数

  • 如果为true,表示在捕获阶段执行，false为在冒泡阶段执行(默认为false).

阻止事件传播

阻止事件传播，既可以是在冒泡阶段，也可以是在捕获阶段。

有以下方法：

  • e.cancelBubble=true;

  • e.stopPropagation();

  • return false;

e.stopPropagation()阻止事件传播，既可以是在冒泡阶段，也可以是在捕获阶段。

e.stopPropagation()很少用到在捕获阶段去阻止事件的传播，大家就以为e.stopPropagation()只能阻止事件在冒泡阶段传播。

阻止默认行为

e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为。

 

DOM3 事件监听

DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件。

DOM中的事件模拟自定义事件

DOM3级还定义了自定义事件自定义事件不是由DOM原生触发的它的目的是让开发人员创建自己的事件。

要创建的自定义事件可以由createEvent("CustomEvent");

​

JavaScript事件队列

javascript除了主线程，还有一个任务队列的东西，主线程执行完毕了，就去队列找任务，当然我们不点击的话，任务队列就是空的，当我们点击了，addEventLister就会把他的第二个参数的函数放到队列里，然后javaScript主线程突然发现队列里有东西了，就赶紧出栈 出来执行

"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

任务队列

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

JavaScript事件处理，就是UI有了操作，就吧相应事件丢到JavaScript执行栈里面。UI交互与JavaScript执行不在同一个线程里面。

比如我们修改DOM，修改dom的操作是JavaScript代码是同步执行的，但是浏览器重排和重绘是异步进行的。

更多此方面的请参看：《同步与异步：并发/并行/进程/线程/多cpu/多核/超线程/管程》、《浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点》、《弄懂javascript的执行机制:事件轮询|微任务和宏任务|定时器》

参考文章：

JavaScript 运行机制详解：再谈Event Loop www.ruanyifeng.com/blog/2014/10/event-loop.html

JS-------DOM0级事件处理和DOM2级事件处理-------简单记法 https://www.cnblogs.com/holyson/p/3914406.html

ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）https://www.cnblogs.com/best/p/8028168.html

JavaScript学习总结（三）BOM和DOM详解 https://segmentfault.com/a/1190000000654274

浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解 https://segmentfault.com/a/1190000003482372

关于DOM级别的一些问题 https://segmentfault.com/a/1190000000366311

 

posted @ 2021-07-13 21:26  zhoulujun  阅读(128)  评论(0)  编辑  收藏  举报