今天我们将了解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。
比如上面点击按钮,事件冒泡的顺序为:
- button
- div#container
- body
- html
- document
点击事件首先在按钮上被触发,然后沿着DOM树逐渐往上,在每个节点上触发,直到document、window对象。
下图说明了在点击按钮时的事件冒泡效果:
事件捕获
在事件捕获中,事件自顶向下开始流动,直到触发事件的元素,和事件冒泡的顺序正相反
比如上面点击按钮,事件捕获的顺序为:
- document
- html
- body
- div#container
- button
下图说明了事件捕获的效果:
DOM 2级事件流
DOM 2级事件流指定事件流有三个阶段:
- 发生事件捕获,这提供了拦截事件的机会
- 目标元素事件触发
- 发生事件冒泡
下图展示了点击按钮时的DOM 2级事件模型:
事件对象
当事件发生时,浏览器将一个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()
方法阻止事件流传播。
一起学习更多前端知识,微信搜索【小帅的编程笔记】,每天更新