三分钟读懂 DOM 事件机制

  1. 云栖社区>
  2. 博客>
  3. 正文

三分钟读懂 DOM 事件机制

云栖号资讯小哥 2020-07-13 15:54:08 浏览236
展开阅读全文

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!


浏览器的DOM事件机制,就是通过监听函数(listener)对事件做出反应。而事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间,比如点击(click)按钮等,这里的click就是事件的名称。事件发生后,浏览器监听到了这个事件,就会执行对应的监听函数。这是事件驱动编程模式(event-driven)的主要编程方式。

一、事件流

我们知道,DOM是个树形结构,当我们在页面上单击一个按钮,页面上哪些元素会触发这个事件,是发生在这个按钮上,还是这个按钮的容器元素(我们说父元素)也会触发这个点击事件呢?

这就牵扯到事件流,从上面我们知道它描述的是事件触发顺序,那上文中是按钮和其容器元素都触发吗,它们谁先触发呢?这可不是确定的,得看是哪种类型的事件流了。

1、事件冒泡

事件冒泡是IE 的事件流,事件是由最具体的元素接收,然后逐级向上传播,在每一级的节点上都会发生,直到传播到document对象,向Chrome这样的浏览器会冒泡到window对象(就像水底的泡泡在上升)。

2、事件捕获

事件捕获是Netscape浏览器开发团队提出的,很有意思,他们思想和IE 的截然相反。也就是说,从不具体的节点到最具体的节点,一般是从document对象开始传播,不过很少人用事件捕获的,还是事件冒泡用的多。

3、DOM 事件流

一个事件发生后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段:

第一阶段:从window对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase)。

第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。

第三阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。

这种三阶段的传播模型,使得同一个事件会在多个节点上触发。

1

二、事件处理程序

前面简单说了什么是事件,那响应事件的函数就是事件处理程序。比如click是事件名称,加上"on"开头,事件处理程序是onclick,有以下几种方式来给事件指定事件处理程序。

1、HTML 事件处理程序

其实就是,HTML 的on属性。

<button onclick="doSomething()">点击</button>

on + 事件名,因为要执行函数,我这里写的doSomething(),这是会执行的代码,不能写个函数名哈,要记得带上括号。使用这个方法指定的监听代码,只会在冒泡阶段触发。

2、DOM 0级事件

其实就是,元素节点的事件属性。

var btn = document.getElementById('btn');
btn.onclick = function () {
  console.log('被点击了!');
};

这样就获取按钮的引用,并给它指定事件onclick,点击后在控制台输出'被点击了!'。

如果想删除事件处理程序,只需要这样 btn.onclick = null; // 删除事件处理程序

3、DOM 2级事件

el.addEventListener(event-name, callback, useCapture)

  • event-name: 事件名称,可以是标准的DOM事件
  • callback: 回调函数,当事件触发时,函数会被注入一个参数为当前的事件对象 event
  • useCapture: 默认是false,代表事件句柄在冒泡阶段执行
// 例2
var btn = document.getElementById('btn');
btn.addEventListener("click", test, false);
function test(e){
    e = e || window.event;
    alert((e.target || e.srcElement).innerHTML);
    btn.removeEventListener("click", test)
}
//IE9-:attachEvent()与detachEvent()。
//IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener(),使用 attachEvent()与detachEvent() 代替,因为IE9以下是不支持事件捕获的,所以也没有第三个参数,第一个事件名称前要加on。

4、 DOM 3级事件

DOM 3级事件在DOM 2级事件的基础上添加了更多的事件类型:

  • UI事件,当用户与页面上的元素交互时触发,如:load、scroll
  • 焦点事件,当元素获得或失去焦点时触发,如:blur、focus
  • 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dblclick、mouseup
  • 滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel
  • 文本事件,当在文档中输入文本时触发,如:textInput
  • 键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress
  • 合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart
  • 变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

三、事件委托

通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素;

一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。

举个例子,比如一个宿舍的同学同时快递到了,一种方法就是他们都傻傻地一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一一分发给每个宿舍同学;

在这里,取快递就是一个事件,每个同学指的是需要响应事件的 DOM 元素,而出去统一领取快递的宿舍长就是代理的元素,所以真正绑定事件的是这个元素,按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

委托的优点

1.减少内存消耗

试想一下,若果我们有一个列表,列表之中有大量的列表项,我们需要在点击列表项的时候响应一个事件;

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

如果给每个列表项一一都绑定一个函数,那对于内存消耗是非常大的,效率上需要消耗很多性能;

因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是ul上,然后在执行事件的时候再去匹配判断目标元素;

所以事件委托可以减少大量的内存消耗,节约效率。

2.动态绑定事件

比如上述的例子中列表项就几个,我们给每个列表项都绑定了事件;

在很多时候,我们需要通过AJAX或者用户操作动态的增加或者去除列表项元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件;

如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的;

所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

3.jQuery 中的事件委托

jQuery 中的事件委托相信很多人都用过,它主要这几种方法来实现:

2

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/live

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-07-11
本文作者:Shawnjonchan
本文来自:“掘金”,了解相关信息可以关注“掘金”

网友评论

登录后评论
0/500
评论
云栖号资讯小哥
+ 关注