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

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

事件处理程序

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

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

JavaScript 事件队列

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

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

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

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

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

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

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

DOM 0 级事件监听

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

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

事件冒泡与事件捕获

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

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

事件冒泡示意图

事件捕获示意图

在 dom 时代，兼容了二者

DOM事件流

如何阻止冒泡？

阻止冒泡有以下方法：

• e.cancelBubble=true;

• e.stopPropagation();

• return false;

为什么没有 DOM 1 事件

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

DOM 2 级事件处理程序

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

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);  //会按顺序进行调用，不会覆盖

window 对象方法

20180203204200903847330.jpeg

参考文章：

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

转载本站文章《再谈BOM和DOM(4):DOM0/DOM2事件处理分析》,请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0609_8453.html