DOM事件全整理之从DOM事件级别,DOM事件流到事件委托

最新推荐文章于 2024-09-18 10:31:28 发布
最新推荐文章于 2024-09-18 10:31:28 发布
阅读量352 收藏 5
点赞数 2
文章标签： 面试
原文链接：https://juejin.im/post/5cdf5481f265da1b897a9e3c
版权

  JS编程中常常接触到DOM事件，虽然只是事件而已，但是处于历史原因，它是足够复杂的，也足够强大的，由于自己之前总是对DOM事件的一些概念模糊不清，所以这里来做一下总结啦

DOM级别与DOM事件

  我们常听到DOM0级事件，DOM1级事件，DOM2级事件处理，其实这里的DOM0，DOM1，DOM2和DOM级别是密切相关的。

  最开始的时候，IE4和Netscape等浏览器各自实现自己的一套DOM api，没有一个统一的标准，对于开发者和用户来说是一件头疼的事，于是，1998年，W3C综合了各家的现有API,制定了DOM1级(DOM Level 1)标准。DOM1级比较简洁，由两个模块组成：DOM核心（DOM Core）和DOM HTML，其中各个事件相关的信息作为方法包含在在DOM元素中进行说明的，详细可以了解W3C的相关章节.

  DOM2级的目标要宽泛很多，引入了多个新模块，其中包括DOM Events，即在DOM2的时候，单独把事件作为一个模块，并针对DOM1级事件部分作了很大的升级，不再只是简单的告诉我们有哪些事件可以用，而是使事件的标准更加详细，如新增了事件流，事件捕获，事件冒泡，事件取消等机制和规范。

  DOM Level 3并没有对事件做任何修订(可能是因为认为DOM Events已经足够成熟了吧),所以我们知道现在用的还是DOM Level 2的事件标准。

  到这里可以做一下总结，DOM API 是有DOM1级，DOM2级，DOM3级三个标准的，与之对应的每一个标准中DOM事件相关的部分我们叫做DOM1级事件处理，DOM2级事件处理(刚才也说了，DOM3级事件处理不存在)，那么标准是从DOM Level 1开始的，我们说的DOM0又是什么呢？可以说这只是公认的一种说法，即在有事实标准之前的事件处理，我们叫做DOM0级事件处理。

Tips

  因为DOM1只是对之前各大厂商的DOM api做了以下整理而实施的标准，所以通常我们认为DOM1的事件处理和DOM0的事件处理是一样的。

事件处理程序

  事件处理程序就是响应某个事件的函数，DOM中的事件处理程序有多种方式，大概可以分为以下三种类型。

  1. HTML事件处理程序
  2. DOM0级事件处理程序
  3. DOM2级事件处理程序

HTML事件处理程序

<button onclick="alert(hello world!)"></hello>
复制代码

  像上述代码这样，直接将事件函数写到HTML中元素的属性上，就是HTML事件处理程序，这里双引号中的部分是事件触发后要执行的代码，它实际上是由JS引擎由eval()调用的，所以它是全局作用域。

  这样的事件处理有一个明显的缺点，即当JS代码太复杂时，将大段JS代码卸载HTML中显然不合适，于是有了下面这种写法：

<button onclick="doSomething()"></hello>
复制代码

  这样虽然解决了嵌套代码过长的问题，但又引来了另一个问题，即时差问题—,如果用户在界面刚出现就进行点击，而JS还没有加载好的话，就会报错。

  此外，很重要的一点是，这种写法，一个函数的改变，可能同时需要js和html的改变，严重违背了轻耦合的原则，综上，我们有了DOM0级事件处理。

DOM0级事件处理

<script>
var btn=document.getElementById("#btn");
btn.onclick=function(){
    alert(hello world!)
}
</script>
复制代码

  可以看到，这种方式中可以把事件处理相关部门都放到js中，并且这里的事件处理程序是作为btn对象的方法的，是局部作用域。

  但是现在，我依然面临着问题，如果有对这个元素的单击事件添加两个处理函数，这个就无法帮我实现了，而且即使不需要添加多个处理函数，我也不太敢轻易的添加事件，除非我非常确定，别人写代码时不会涉及到这部分(因为一不小心可能会覆盖他人之前对这个元素的该事件添加的处理函数)。

DOM2级事件处理程序(不支持IE)

  进一步规范后，有了DOM2级事件处理程序，我们可以通过类似如下代码，对一个元素的同一个事件添加多个处理程序

var btn=document.getElementById("#btn");
btn.addEventListener("click",function(){
    alert(hello world!)
})

btn.addEventListener("click",function(){
    alert(hello world2!)
})
</script>

复制代码

  通过DOM2级的addEventListener方法我们可以实现绑定多个事件处理程序，但要注意的是同样的事件和事件流机制下相同的方法只会触发一次，即相同的方法会发生覆盖。 等等，这里的事件流又是什么呢？

事件流机制

  我们已经知道，一个元素绑定了特定事件之后，在事件发生的同时，函数就会被调用，但请看上图这种请看，爷爷，父亲和儿子这三个div元素都同时绑定了各自单击事件 funcgrand(),funcparent(),funcchild()，那么当我在儿子上单击时，哪个函数会被触发呢？

  首先来分析一下，如果说直观感受是在儿子元素上发生的单击事件，所以应该触发funcchild(),但细细想来这样是不妥的，因为儿子元素本身就是父亲元素甚至爷爷元素的一部分，所以说是不是相当于也在父亲和爷爷元素上发生了单击事件呢？答案是是的，这种情况下三个元素绑定的对应事件的函数都会被浏览器触发，那么问题又来啦，既然三个函数都会被触发，那么它们应该以什么顺序被触发呢，是自上到下呢，还是自下到上呢？

  这个问题也就是我们常说的事件流了，即元素从页面中接收事件的顺序，也即事件在页面中的传播顺序。

  W3C对这个问题给了我们一个答案，就是都可以，既可以自上而下依次触发，又可以自下而上触发，具体顺序由我们自己而定(之所以支持这两种方式，是为了与之前浏览器的实现兼容，因为早期IE事件传播方向为从上至下，而Netscape 则从下至上)。

事件捕获和事件冒泡

  实际上，之前我们提到的addEventListener还有第三个参数，可以为true或false.当第三个参数为true时，绑定的是捕获阶段的事件，在捕获阶段，事件是由上到下依次触发的，反之当第三个参数为false时，绑定的是冒泡阶段的事件，在冒泡阶段，事件是由下到上触发的。

  W3C规定，当事件发生时，最先通知window,然后是document,由上到下依次进入知道最底层的被触发的那个元素(也就是目标元素，通常的event.target的值)为止，这个过程就是捕获。   之后，事件会从目标元素开始，冒泡，由下至上逐层传递至window,这个过程就是冒泡。

  所以,捕获是会比冒泡先执行的

Tips

  正如事件捕获和事件冒泡提到的，事件程序可能会在两个阶段中被执行，即捕获中和冒泡中，当一个事件添加了两个处理函数，一个指定了参数true,一个指定的参数false,则它们都会被执行，且参数为true的那个先执行，因为是捕获阶段先发生.

  但是有一个例外，即如果事件函数被添加在了目标元素本身上，如之前的例题中的儿子元素上被绑定了两个单击事件函数，一个第三个参数是true,一个第三个参数是false，则它们的实际执行顺序是不受第三个参数控制的，而只是单纯的和添加事件的顺序有关(先addEventListener的先执行),这个可能是和处于目标阶段有关(目标阶段和捕获阶段和冒泡阶并称为三大阶段，所以说目标阶段中要把捕获和冒泡的思想排除？真正的顺序是捕获—>目标阶段->冒泡吧?)

IE事件处理程序

  对于IE来说，在IE9之前，必须使用attachEvent而不是标准方法addEventListener,IE事件处理程序中有类似于DOM2级事件处理程序的2个方法attachEvent和detachEvent

  它们都接收两个参数:

  1. 事件处理程序名称,如 onclick,onmounseover,注意,这里是事件处理程序名称，而不是事件名称，要有前缀on

  2. 事件处理程序函数

  3. 不像DOM2级事件处理程序一样，它们不接收第三个参数，因为IE8及更早版本只支持冒泡事件流(没有捕获阶段)

Tips

  在IE8中，事件执行的顺序不是添加的顺序而是添加顺序的相反顺序，而在IE6,7中 事件执行的顺序是随机的，和添加顺序无关。

   使用attachEvent方法还有个缺点是，this的值会变成window对象的引用而不是触发事件的元素。

跨浏览器的事件处理程序

  就像上述提到的，老的IE浏览器的事件处理程序不同于标准的DOM2事件处理，所以为了兼容各浏览器的事件处理,我们可以用一个封装的工具函数来实现通用的添加，移除事件。

var EventUtil={
    addEventHandler: function(type,element,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,element);
        }else{
            element["on"+type]=handler;
        }
    },
    removeEventHandler: function(type,element,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,element);
        }else{
            element["on"+type]=null;
        }
    }
}
复制代码

事件对象

  事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生，并且只能在事件处理函数内部访问，在所有事件处理函数结束后，事件对象会被销毁。

  标准的Event对象属性主要有以下几个：

  1. bubbles 布尔值,表示事件是否是冒泡类型
  2. cancelable 布尔值，表示事件是否可以取消默认动作
  3. currentTarget 当前目标元素，即添加当前事件处理程序的元素
  4. target 实际目标元素，即实际触发事件的元素
  5. type 返回当前事件的名称
  6. eventPhase 事件传播的当前阶段,1表示捕获阶段

  标准的Event对象的方法主要有以下几个：

  1. preventDefault() 通知浏览器不要执行该事件的默认动作，常用于阻止链接的跳转，表单的提交，等标签的默认行为
  2. stopPropagation() 冒泡阶段下,阻止事件的继续向上冒泡

事件对象的兼容性

  和事件处理程序一样，事件对象的属性和方法也存在兼容性问题。

  1. 事件对象的获取   在IE8及以前的版本中，通过设置属性注册事件处理程序时，调用的时候并未传递事件对象，需要通过全局对象window.event来获取,解决方式如下:

function getEvent(event){
    event = event || window.event
}
function hander(event){
    event = getEvent(event)
    ...
}

复制代码
  1. 阻止默认事件行为

  IE浏览器的event事件没有preventDefault()这个方法，但是可以通过设置event的returnValue值为false来达到同样的效果，如下:


window.event.returnValue=false;

复制代码
  1. 阻止冒泡

  IE浏览器的event对象也没有stopPropagation()方法，但可以设置cancelBubble属性为true，阻止事件的继续传播，如下:


window.event.cancelBubble=true; 

复制代码

事件委托

  事件委托就是利用事件冒泡，只需指定一个事件处理程序，就可以管理某一类型的所有事件，通过事件委托，可以做到通过在祖先元素添加一个事件处理程序，就可以控制其子孙元素的某些行为。

  1. 首先来看利用事件委托来管理某一类型的所有事件的例子。

  需求是未ul下的所有li添加click事件对应的行为处理，在没有用事件委托之前，代码是着这样的:


<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
var list=document.getElementsByTagName("li");
for(i=0;i<list.length;i++){
    list[i].onclick=function(){
        alert("我是"+e.target);
    }
}
</script>

复制代码

  目前确实达到了，能够所有li都能对click事件有所响应了，但如果再添加一个添加列表项的按钮呢？当动态的添加列表项时，列表项元素被添加了，可是新添加的节点是没有绑定事件的(除非在添加元素时再加上绑定事件的逻辑)，到这里，我们发现了问题所在:

  1. 在所有元素上一一添加事件绑定会导致频繁的操作DOM获取元素,同时多个元素各自监听自己的事件，都会增加浏览器的消耗
  2. 在页面中动态添加元素时，还需要重新走一遍添加监听事件的逻辑才能使新元素能够响应事件

  庆幸的是，针对这个问题，我们有更好的解决方案，即利用冒泡的原理实现的事件委托。

  我们只监听最外层元素，然后在事件处理函数中根据事件源，即target属性，进行不同的事件处理，这样，我们只需要针对一个元素添加事件处理程序，极大的降低了DOM访问，并且不需要单独为动态添加的元素添加监听事件了，因为元素的事件会冒泡到最外层，被最外层的事件处理程序截获,如下：


var ul=document.getElementById('ulList');
ul.onclick=function(e){
    var e= e || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName.toLowerCase() === "li"){
        alert("我是"+e.target);
    }
}

复制代码

  从这个例子可以看出，当用事件委托的时候，完全不需要遍历元素的子节点，只需要给父级元素添加事件监听就好了，之后新添加的子节点也能够同样的对触发事件作出适当的响应

  1. 还有一个常见的利用事件委托的例子，就是点开浮层，关闭浮层，我们常常利用事件委托来监听元素外空间区域的点击，来关闭浮层。

Tips

  1. 不是所有事件都是可以委托的。适合用事件委托的事件有:click mousedown mouseup keydown keyup keypresss
weixin_33928137
关注
DOM中的事件流、事件对象、事件委托、阻止事件冒泡
wutong_jun的博客
08-18 295
DOM事件流、什么是事件对象,event对象代表事件的状态,事件对象的兼容性方案,事件对象的常见属性和方法,e.target和this的区别,阻止事件冒泡的两种方式,事件委托(代理、委派)
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
前端面试（4）—— DOM事件的总结
乐夫天命兮的博客
08-04 406
知识点主要包括以下几个方面： - 基本概念：DOM事件的级别 面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ....”。 - DOM事件模型、DOM事件流 面试官如果问你“**DOM事件模型**”，你不一定知道怎么回事。其实说的就是**捕获和冒泡**。 **DOM事件流**，指的是事件传递的**三个阶段**。...
【DOM】DOM事件和DOM操作总结
ColdCoder的博客
03-10 623
文章目录前言一、DOM事件1 事件级别2 事件的分类3 事件模型和事件流4 Event 对象常见应用二、常用DOM操作1 在DOM中，创建、添加、删除、移除、替换、插入和查找节点2 一些常用的 HTML DOM 属性： 前言 DOM是文档对象模型，DOM是W3C的标准。DOM定义了访问HTML和XML文档的标准，即独立于平台和语言的接口。 W3C DOM标准分为以下三个标准: 核心DOM --针对任何结构化文档的标准模型 XML DOM–针对XML文档的标准模型 HTML DOM–针对HTML文档的
JS “DOM 分级” 与 “DOM 事件模型”
拯救世界的光太郎
10-11 563
查了很多文章，都没有把这两个概念做一个系统的区分。这两个概念究竟有什么联系，也都没有一篇文章能够解释请求，其实标题为“DOM 分级”的文章网上一扒一大堆，可内容却都讲“DOM 事件模型”，不知道这些人自己有没有搞明白这两个概念。 首先，DOM分级有四级： DOM0级、DOM1级、DOM2级、DOM3级 DOM事件模型有三个： DOM0级提出的DOM0级模型、DOM2级提出的DOM2级模型、IE事件模型 DOM0级提出了原始的事件模型；但DOM1级没有定义事件相关的内容，仅仅是定义了HTML和XML
DOM 事件深入浅出（一）
github_38314237的博客
10-06 192
在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有...
DOM事件总结
weixin_48115183的博客
04-20 253
一.Dom事件的级别 1. element.onclick = function () { } 2. element.addEventListener('click', function () { }, false); 【重要】上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。 3. element.addEventListener('keyup', function () {
DOM事件类型总结大全
a115544的博客
06-15 187
unload:事件在用户退出页面时发生 　　　　window.onload = function(){ 　　　　　　return "页面关闭!"; 　　　　}; onblur:失去焦点发生变化 　　　　window.onblur = function(){ 　　　　　　inp.value = inp.value.toUppercase(); 　　　　}; onfocus:...
DOM事件
Xyt1737的博客
09-07 92
DOM事件： javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生 的一些特定的交互瞬间。 事件三要素： 1. 事件目标（event target） 发生的事件与之相关联或与之相关的对象 2. 事件处理程序（event handler） 处理或相应事件的函数 3. 事件对象（event object） 与特定事件相关且包含有关该事件详细信息的对象 事件流（页面接收事件的顺序） 1. 事件冒泡 特点：从内往外传递 ...
Javascript处理DOM元素事件实现代码
12-09
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候，onclick=function...
js DOM的事件常见操作实例详解
10-15
事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播；事件捕获则相反，从最外层节点开始向下传播。可以使用`addEventListener`方法来指定事件处理程序是在冒泡阶段还是捕获阶段执行。 此外，还可以使用`...
jQuery为DOM动态追加事件的方法
10-20
从提供的文件内容中我们可以学习到几个关键点关于jQuery如何实现事件委托： 1. jQuery中的`.on()`方法是实现事件委托的主要手段。该方法可以用来绑定一个或多个事件处理程序到当前选定的元素上。 2. 当我们使用`....
DOM事件的区别
01-04
本文将从DOM0级事件处理、DOM2级事件处理以及事件流、事件委托等方面进行深入探讨，帮助读者更好地理解这些概念及其区别。 #### 一、DOM0级事件处理 DOM0级事件处理是最基础的JavaScript事件处理模型，它允许...
DOM事件汇总
weixin_47038177的博客
06-11 306
今天的话主要是说了dom的事件流，事件代理和dom事件操作方法。 那下面简单的捋一下思路 1⃣，首先说下dom事件流，那么何为事件流？就是一个事件它触发的过程。那dom的事件流就是当我们触发一个事件，它会先进行事件捕获，然后处于目标阶段，事件冒泡。 那你又会问了，什么是事件捕获，事件冒泡？ 事件捕获：就是当我们触发一个事件，他不会立即执行，而是从上到下，从document一直向下捕获 直到捕获到目标阶段。 那我们怎么阻止默认行为呢？ js写法：. preventDefault vue写法：. captrue
DOM事件笔记整理
QHQLemon的博客
06-19 136
1.绑定事件的方法 （1）ele.onxxx = function(event){} 兼容性很好，但是一个元素的一个事件类型只能绑定一个处理函数 基本等同于写在HTML行间上 var wrapper = document.getElementsByClassName("wrapper")[0]; wrapper.onclick = function(){ c...
javaScript 事件模型
StartLine_05的博客
09-01 283
DOM0 直接绑定 <input onclick="sayHi()"/> btn.onclick = function() {} btn.onclick = null DOM2 DOM2 级事件可以冒泡和捕获 通过 addEventListener 绑定 通过 removeEventListener 解绑 // 绑定 btn.addEventListener('click', sayHi) // 解绑 btn.removeEventListener('click', sayHi) DOM3
dom事件总结
xianyu156的博客
09-05 170
事件概要 1：事件是什么 实现用户与浏览器的交互 2：事件处理函数的作用 当用户和浏览器交互时调用特定的js代码， 3：事件对象的作用 记录事件触发所有内容 4：用户和浏览器的交互过程 当用户触发事件时，浏览器会调用出特定的代码，与用户完成交互的过程 事件分类 1：window onresize 当浏览器串口繁盛变化时候 2：鼠标 onclick、、onmouseover、 onmouseout、...
Leetcode面试经典150题-173.二叉搜索树迭代器
最新发布
个人专长：数据结构和算法、大数据、数据库、主流框架
09-18 1197
Leetcode面试经典150题-173.二叉搜索树迭代器，字节跳动高频面试题啊，抖音和头条都考过，务必掌握
JavaScript实现DOM事件处理与事件委托
"这篇文档主要讨论了如何使用JavaScript来处理DOM元素的事件，特别是当需要添加多个事件、移除事件或者在封装JavaScript控件时如何处理自定义事件。文中提到了浏览器提供的`addEventListener`和`attachEvent`方法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值