【JavaScript 漫游】【022】事件模型


文章简介

本篇文章为【JavaScript 漫游】专栏的第 022 篇文章,对 JavaScript 中事件模型相关的知识点进行了总结。

监听函数

浏览器的事件模型,就是通过监听函数(listener)对事件做出反应。事件发生后,浏览器监听到了这个事件,就会执行对应的监听函数。这是事件驱动编程模式(event-driven)的主要编程方式。

JavaScript 有三种方法,可以为事件绑定监听函数。

  • HTML 的 on- 属性
  • 元素节点的事件属性
  • EventTarget.addEventListener()

HTML 的 on- 属性

HTML 语言允许在元素的属性中,直接定义某些事件的监听代码。

js 复制代码
<body onload="doSomething()">
<div onclick="console.log('触发事件')">

注意,这些属性的值是将会执行的代码,而不是一个函数。

js 复制代码
<!-- 正确 -->
<body onload="doSomething()">

<!-- 错误 -->
<body onload="doSomething">

一旦指定的事件发生,on- 属性的值是原样传入 JavaScript 引擎执行。因此如果要执行函数,不要忘记加上一对圆括号。

使用这个方法指定的监听代码,只会在冒泡阶段触发。

js 复制代码
<div onclick="console.log(2)">
  <button onclick="console.log(1)">点击</button>
</div>

直接设置 on- 属性,与通过元素节点的 setAttribute() 设置 on- 属性,效果是一样的。

js 复制代码
el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element οnclick="doSomething()">

元素节点的事件属性

元素节点对象的事件属性,同样可以指定监听函数。

js 复制代码
window.onload = doSomething;

div.onclick = function (event) {
  console.log('触发事件');
};

使用这个方法指定的监听函数,也是只会在冒泡阶段触发。

它和 HTML 的 on- 属性的差异是,它的值是函数名 doSomething,而不像后者,必须给出完整的监听代码 doSomething()

EventTarget.addEventListener()

所有 DOM 节点实例都有 addEventListener(),用来为该节点定义事件的监听函数。

js 复制代码
window.addEventListener('load', doSomething, false);

小结

上面三种方法,第一种"HTML 的 on- 属性",违反了 HTML 与 JavaScript 代码相分离的原则,将两者写在一起,不利于代码分工,因此不推荐使用。

第二种"元素节点的事件属性"的缺点在于,同一个事件只能定义一个监听函数,也就是说,如果定义两次 onclick 属性,后一次定义会覆盖前一次。因此,也不推荐使用。

第三种 EventTarget.addEventListener() 是推荐的指定监听函数的方法。它有如下优点:

  • 同一个事件可以添加多个监听函数
  • 能够指定在哪个阶段(捕获阶段还是冒泡阶段)触发监听函数
  • 除了 DOM 节点,其他对象(比如 windowXMLHttpRequest 等)也有这个接口,它等于是整个 JavaScript 统一的监听函数接口。

this 的指向

监听函数内部的 this 指向触发事件的那个元素节点。

事件的传播

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

  • 第一阶段 :从 window 对象传导到目标节点(上层传导底层),称为捕获阶段(capture phase)
  • 第二阶段:在目标节点上触发,称为目标阶段(target phase)
  • 第三阶段 :从目标节点传导回 window 对象(从底层传回上层),称为冒泡阶段(bubbling phase)

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

html 复制代码
<div>
  <p>点击</p>
</div>

事件的代理

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。

js 复制代码
var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

如果希望事件到某个节点为止,不再传播,可以使用事件对象的 stopPropgation 方法。

js 复制代码
// 事件传播到 p 元素后,就不再向下传播了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 p 元素后,就不再向上冒泡了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, false);

stopPropgation 方法只会阻止事件的传播,不会阻止该事件触发 <p> 节点的其他 click 事件的监听函数。也就是说,不是彻底取消 click 事件。

js 复制代码
p.addEventListener('click', function (event) {
  event.stopPropagation();
  console.log(1);
});

p.addEventListener('click', function(event) {
  // 会触发
  console.log(2);
});

如果想要彻底取消该事件,不再触发后面所有 click 的监听函数,可以使用 stopImmediatePropgation 方法。

js 复制代码
p.addEventListener('click', function (event) {
  event.stopImmediatePropagation();
  console.log(1);
});

p.addEventListener('click', function(event) {
  // 不会被触发
  console.log(2);
});
相关推荐
拉不动的猪15 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程32 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041239 分钟前
Netty编解码器详解与实战
前端
袁煦丞44 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴3 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript