JS DOM编程复习笔记 - 事件初识(十二)

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

目录

  • 事件初识,addEventListener()
  • 理解事件流
  • 什么是事件冒泡
  • 什么是事件捕获
  • DOM 2级事件流
  • 事件对象
  • preventDefault()
  • stopPropagation()

事件初识

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

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

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

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

假设我们有一个按钮

<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。

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

  1. button
  2. div#container
  3. body
  4. html
  5. document

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

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

JS DOM编程复习笔记 - 事件初识(十二)

事件捕获

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

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

  1. document
  2. html
  3. body
  4. div#container
  5. button

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

JS DOM编程复习笔记 - 事件初识(十二)

DOM 2级事件流

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

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

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

JS DOM编程复习笔记 - 事件初识(十二)

事件对象

当事件发生时,浏览器将一个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()方法阻止事件流传播。

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

上一篇:05-网页特效篇


下一篇:【无标题】