JavaScript文档对象模型DOM（二）
- 1. 事件是什么
- 2. 事件类型
- 3. 添加和移除事件处理器
- 4. 事件对象
- 4.1 事件对象的常用属性
- 5. 事件流
- 5.1 阻止默认行为
- 5.2 事件冒泡
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>
)
