JS DOM编程复习笔记 - 事件初识（十二）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天我们将了解JavaScript DOM事件、事件模型以及如何处理事件。

事件初识

事件是用户在浏览器中发生的各种操作，浏览器会反馈给我们。

比如，用户点击了网页上的按钮，我们可以通过响应此事件来显示一个对话框。

每个事件都可能有一个事件处理程序，它是事件触发时执行的代码块。

事件处理程序也称为事件监听器，它监听事件并在事件发生时执行。

假设我们有一个按钮

<button id="btn">点我点我点我</button>

我们使用addEventListener() 方法来给按钮增加一个事件监听器

<button id="btn">点我点我点我</button>

<script>
  let btn = document.querySelector('#btn');

  function display() {
    alert('按钮被点击');
  }

  btn.addEventListener('click', display);
</script>

同样也可以传入匿名函数给addEventListener

let btn = document.querySelector('#btn');

btn.addEventListener('click',function() {
	alert('按钮被点击');
});

理解事件流

假设我们的网页是这样

<!DOCTYPE html>
<html>
<head>
  <title>JS Event Demo</title>
</head>
<body>
  <div id="container">
    <button id="btn">点我点我!</button>
  </div>
</body>

当我们点击页面中的button按钮，其实我们不仅点击了按钮，同样也点击了div和整个网页。

事件流解释了页面上触发事件的元素通过DOM树传播的过程。

有两种主要的事件模型：事件冒泡和事件捕获

事件冒泡

在事件冒泡模型中，事件从触发事件的元素开始，然后继续向上流动直到document、window。

比如上面点击按钮，事件冒泡的顺序为：

button
div#container
body
html
document

点击事件首先在按钮上被触发，然后沿着DOM树逐渐往上，在每个节点上触发，直到document、window对象。

下图说明了在点击按钮时的事件冒泡效果：

JavaScript-event-bubbling

事件捕获

在事件捕获中，事件自顶向下开始流动，直到触发事件的元素，和事件冒泡的顺序正相反

比如上面点击按钮，事件捕获的顺序为：

document
html
body
div#container
button

下图说明了事件捕获的效果：

JavaScript-event-capturing

DOM 2级事件流

DOM 2级事件流指定事件流有三个阶段：

发生事件捕获，这提供了拦截事件的机会
目标元素事件触发
发生事件冒泡

下图展示了点击按钮时的DOM 2级事件模型：

JavaScript-DOM-Level-2-Event

事件对象

当事件发生时，浏览器将一个Event 对象传递给事件处理程序:

<button id="btn">点我点我点我</button>

<script>
  let btn = document.querySelector('#btn');

  btn.addEventListener('click', function(event) {
    console.log(event.type);
    // 输出："click"
  });
</script>

下面的表格展示了事件对象最常用的的属性和方法：

属性 / 方法	描述
bubbles	如果为事件冒泡，则为true
cancelable	如果可以取消事件的默认行为，则为 true
currentTarget	触发事件的当前元素
defaultPrevented	如果调用了preventDefault() ，则为 true
detail	事件的更多信息
eventPhase	1 为捕获阶段，2 为目标元素，3 为冒泡
preventDefault()	取消事件的默认行为，仅在`cancelable`属性为true时有效
stopPropagation()	阻止事件捕获或冒泡，仅在`bubbles`为true时有效。
target	事件的目标元素
type	触发事件的类型

注意：事件对象只在事件处理函数内使用，函数执行完成后事件对象将自动销毁。

preventDefault()

为了阻止事件的默认行为，可以使用preventDefault()

比如，当我们点击一个链接时，浏览器会跳转到href指定的链接，我们可以通过使用preventDefault()方法来阻止这个默认行为

<a href="https://baidu.com/">百度一下</a>

<script>
  let link = document.querySelector('a');

  link.addEventListener('click',function(event) {
    console.log('clicked');
    event.preventDefault();
  });
</script>

然后我们再点击链接，发现不会跳转目标链接

stopPropagation()

stopPropagation()方法将阻止事件流。

看下面的例子

<button id="btn">点我点我点我</button>

<script>
let btn = document.querySelector('#btn');

btn.addEventListener('click', function(event) {
  console.log('按钮 被点击!');
  event.stopPropagation();
});

document.body.addEventListener('click',function(event) {
  console.log('body 被点击!');
});
</script>

如果调用了stopPropagation() 方法，事件将不会冒泡到body元素。

如果不调用stopPropagation() 方法，事件将先在button按钮触发，然后冒泡到body上。

总结

今天我们了解JS DOM中的事件体系，事件流有两个主要模型：事件冒泡和事件捕获，DOM 2级事件指定事件流分为三个阶段：事件冒泡、事件发生在目标元素和事件捕获；使用addEventListener()来为元素添加事件监听程序，使用preventDefault() 方法阻止事件的默认行为，使用stopPropagation()方法阻止事件流传播。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新