JavaScript文档对象模型DOM(二)
1. 事件是什么
事件
是发生在编程的系统中的事情,当事件发生时,系统产生某种信号,并提供一种机制,可以自动采取某种行动(即运行一些代码)。
为了对一个事件
做出反应,需要添加一个事件处理器
。这是一个代码块,在事件发生时运行。当这样一个代码块被定义为响应一个事件而运行时,称为注册一个事件处理器。(事件处理器也被叫做事件监听器)
2. 事件类型
-
鼠标事件:
click
:鼠标点击事件mouseenter
:鼠标进入事件mouseleave
:鼠标移出事件
-
焦点事件:
focus
:获得焦点事件blur
:失去焦点事件
-
键盘事件
keydown
:键按下事件keyup
:键松开事件
-
输入事件
input
:输入事件
-
页面加载事件:
load
:页面加载事件
-
页面滚动事件:
scroll
:页面滚动事件
-
页面尺寸事件:
resize
:页面尺寸事件
3. 添加和移除事件处理器
- addEventListener():添加事件处理器
- removeEventListener():移除事件处理器
<html>
<style>
.parent {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div class="parent"></div>
<script>
const div = document.querySelector('div');
// 添加点击事件
div.addEventListener("click", () => {
alert("hello")
});
</script>
</html>
<html>
<style>
.parent {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div class="parent"></div>
<script>
function clickHandle() {
alert("hello")
}
const div = document.querySelector('div');
// 添加点击事件
div.addEventListener("click", clickHandle);
// 移除点击事件
div.removeEventListener("click", clickHandle);
</script>
</html>
4. 事件对象
在事件处理函数内部,系统会自动传入一个事件对象
参数,以提供额外的功能和信息。例如:下面代码中,clickHandle
处理器函数的event
参数就是事件对象
<html>
<style>
.parent {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div class="parent"></div>
<script>
// event 就是事件对象
function clickHandle(event) {
alert("hello")
}
const div = document.querySelector('div');
// 添加点击事件
div.addEventListener("click", clickHandle);
</script>
</html>
4.1 事件对象的常用属性
type
:事件的类型clientX/ClientY
:获取光标相对于浏览器可见窗口的位置offsetX/offsetY
:获取光标相对于 DOM 元素的位置key
:键盘按下的键target
:触发的元素
5. 事件流
事件流
指的是事件完整执行过程中的流动路径。
事件流的三个阶段:
- 捕获阶段:事件流的第一个阶段,从根节点开始向下传播到目标元素。 可以使用
addEventListener
的第三个参数指定事件处理程序在捕获阶段中执行。 - 目标阶段:事件流的第二个阶段,事件到达目标元素后被触发执行事件处理程序。
- 冒泡阶段:事件流的最后一个阶段,事件从目标元素开始向上冒泡,依次经过每个父元素,直到达到根节点。可以使用
addEventListener
的第三个参数设置为 false 或省略来指定事件处理程序在冒泡阶段中执行。
5.1 阻止默认行为
有时会遇到一些情况,希望事件不执行它的默认行为。可以通过preventDefault()
方法阻止元素的默认行为。
<html>
<a href="http://www.baidu.com">百度</a>
<script>
const a = document.querySelector('a');
// 添加点击事件
a.addEventListener("click", (event) => {
// 阻止默认行为
event.preventDefault();
});
</script>
</html>
5.2 事件冒泡
事件冒泡
描述了浏览器处理嵌套元素事件的方式,从嵌套最深处往外冒。
例如:下面代码示例,当你点击grandson
区域时,依次弹出grandson
、child
、parent
的警告框;当你点击child
区域时,依次弹出child
、parent
的警告框;当你点击parent
区域,只弹出parent
的警告框。
<html>
<style>
.parent {
height: 500px;
width: 500px;
background-color: red;
}
.child {
height: 200px;
width: 200px;
background-color: blue;
}
.grandson {
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
<div class="parent">
<div class="child">
<div class="grandson"></div>
</div>
</div>
<script>
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const grandson = document.querySelector('.grandson');
// 添加点击事件
parent.addEventListener("click", (event) => {
alert('我是parent')
});
child.addEventListener("click", (event) => {
alert('我是child')
});
grandson.addEventListener("click", (event) => {
alert('我是grandson')
});
</script>
</html>
有时候,我们不想点击grandson
区域时,弹出child
和parent
的警告框。这时我们可以用stopPropagation()
阻断事件的流动传播。
<html>
<style>
.parent {
height: 500px;
width: 500px;
background-color: red;
}
.child {
height: 200px;
width: 200px;
background-color: blue;
}
.grandson {
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
<div class="parent">
<div class="child">
<div class="grandson"></div>
</div>
</div>
<script>
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const grandson = document.querySelector('.grandson');
parent.addEventListener("click", (event) => {
alert('我是parent')
});
child.addEventListener("click", (event) => {
alert('我是child')
});
grandson.addEventListener("click", (event) => {
alert('我是grandson')
// 阻断事件的流动传播
event.stopPropagation();
});
</script>
</html>