当前位置：首页 > news >正文

前端小白的学习之路(事件流)

news 2026/2/10 14:50:29

提示：事件捕获，事件冒泡，事件委托

事件模型(DOM事件流)

1.事件是什么

2.事件流

1).事件流的三个阶段

3.参考代码

二、事件委托

1.概念

2.使用案例

3.阻止冒泡行为

事件模型(DOM事件流)

1.事件是什么

1). 事件是HTML和Javascript交互的驱动器, 事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

2), 事件是用户或浏览器自身执行的某种动作，如 click,load 和 mouseover 都是事件的名字。

3). 事件是 javaScript 和 DOM 之间交互的桥梁。

2.事件流

事件流, 即是一个事件发生的流程或者说流转, 从开始到结束, 都发生了什么

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程,我们就称之为DOM事件流.

1).事件流的三个阶段

1. 捕获阶段 Capture Phase; 从上到下, 层层传递, 直到目标接收

2. 目标阶段 Target Phase; 确认目标, 进行处理

3. 冒泡阶段 Bubbling Phase; 处理结束, 往上传递.

注意:

1. JS建议执行捕获或者冒泡两个阶段中的其中一个阶段

2. 传统绑定事件方式跟attachEvent绑定事件的方式只能得到冒泡阶段

3. addEventListener(type,listener,[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序; 如果是false(默认不写就是false),表示事件冒泡阶段调用事件处理程序.

4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡.

5. 另外需要注意, 不是所有事件都会冒泡的, 有些事件是没有冒泡的,比如onmouseenter,onmouseleave

6. 事件冒泡有时候会带来麻烦,有时候又会帮助我们很巧妙的做某些事件,我们会学习事件委托,事件委托(事件代理)的原理就是事件冒泡

7.监听绑定方式addEventListener()方法中第三个参数可以控制是在冒泡阶段触发还是在捕获阶段触发

3.参考代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#father {width: 400px;height: 400px;background: orange;margin: 50px auto;padding: 20px;border: 10px solid red;}#father #son {width: 150px;height: 150px;background: skyblue;}</style>
</head><body><div id="father"><div id="son">son元素</div></div><script>var son = document.getElementById("son");var father = document.getElementById("father");// son.onclick = function () {//     console.log("son元素的click事件");// }// father.onclick = function () {//     console.log("father元素的click事件");// }// document.body.onclick = function () {//     console.log("body元素的click事件");// }// document.documentElement.onclick = function () {//     console.log("html元素的click事件");// }// document.onclick = function () {//     console.log("document元素的click事件");// }// window.onclick = function () {//     console.log("window元素的click事件");// }/* son.attachEvent("onclick", function () {console.log("son元素的click事件");});father.attachEvent("onclick", function () {console.log("father元素的click事件");});document.body.attachEvent("onclick", function () {console.log("body元素的click事件");})document.documentElement.attachEvent("onclick", function () {console.log("html元素的click事件");});document.attachEvent("onclick", function () {console.log("document元素的click事件");});window.attachEvent("onclick", function () {console.log("window元素的click事件");}); */son.addEventListener("click", function () {console.log("son元素的click事件");},);father.addEventListener("click", function () {console.log("father元素的click事件");});document.body.addEventListener("click", function () {console.log("body元素的click事件");})document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");});document.addEventListener("click", function () {console.log("document元素的click事件");});window.addEventListener("click", function () {console.log("window元素的click事件");});/* son.addEventListener("click", function () {console.log("son元素的click事件");}, false);father.addEventListener("click", function () {console.log("father元素的click事件");}, false);document.body.addEventListener("click", function () {console.log("body元素的click事件");}, false);document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");}, false);document.addEventListener("click", function () {console.log("document元素的click事件");}, false);window.addEventListener("click", function () {console.log("window元素的click事件");}, false); *//* son.addEventListener("click", function () {console.log("son元素的click事件");}, true);father.addEventListener("click", function () {console.log("father元素的click事件");}, true);document.body.addEventListener("click", function () {console.log("body元素的click事件");}, true);document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");}, true);document.addEventListener("click", function () {console.log("document元素的click事件");}, true);window.addEventListener("click", function () {console.log("window元素的click事件");}, true); */// son.onmouseover = function () {//     console.log("son元素的mouseover事件");// }// father.onmouseover = function () {//     console.log("father元素的mouseover事件");// }// document.body.onmouseover = function () {//     console.log("body元素的mouseover事件");// }// document.documentElement.onmouseover = function () {//     console.log("html元素的mouseover事件");// }// document.onmouseover = function () {//     console.log("document元素的mouseover事件");// }// window.onmouseover = function () {//     console.log("window元素的mouseover事件");// }/* son.onmouseenter = function () {console.log("son元素的mouseenter事件");}father.onmouseenter = function () {console.log("father元素的mouseenter事件");}document.body.onmouseenter = function () {console.log("body元素的mouseenter事件");}document.documentElement.onmouseenter = function () {console.log("html元素的mouseenter事件");}document.onmouseenter = function () {console.log("document元素的mouseenter事件");}window.onmouseenter = function () {console.log("window元素的mouseenter事件");} */</script>
</body></html>

二、事件委托

1.概念

事件委托又叫事件代理, 就是不给子元素绑定事件，给父辈元素绑定事件，把处理代码在父辈元素的事件中执行。事件委托的原理是利用事件冒泡，嵌套关系的元素,才可能会有事件冒泡，事件委托一般用来给未来动态添加的元素绑定事件

2.使用案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}ul,ol {list-style: none;}ul,ol {display: flex;}ul li,ol li {margin: 10px 15px;cursor: pointer;}ul li.active,ol li.active {color: red;font-weight: bold;}</style>
</head><body><ul><li class="active">导航1</li><li>导航2</li><li>导航3</li><li>导航4</li><li>导航5</li></ul><script>// 1) 获取所有的li标签var ul = document.querySelector("ul");var items = document.querySelectorAll("ul li");// 2) 循环标签数组for (var i = 0; i < items.length; i++) {// 3) 事件绑定items[i].onclick = function () {for (var j = 0; j < items.length; j++) {items[j].className = ""}this.className = "active";}}// 创建一个li标签var li = document.createElement("li");li.innerHTML = "导航6";ul.appendChild(li);</script><ol><li class="active">导航1</li><li>导航2</li><li>导航3</li><li>导航4</li><li>导航5</li></ol><script>// 1) 获取ol标签var ol = document.querySelector("ol");// 2) 父元素绑定事件ol.onclick = function (event) {// 获取事件源var el = event.target;console.dir(event);// console.log("el:",el);// console.dir(el);// 判断点击的标签是否为li标签if (el.tagName === "LI") {for (var j = 0; j < ol.children.length; j++) {// ol.children[j].className = "";ol.children[j].classList.remove("active");}// 设置当前点击标签的类名// el.className = "active";el.classList.add("active");}}// 创建一个li标签var li = document.createElement("li");li.innerHTML = "导航6";ol.appendChild(li);</script></body></html>

3.阻止冒泡行为

e.stopPropagation()//阻止冒泡行为

事件模型(DOM事件流)

1.事件是什么

2.事件流

1).事件流的三个阶段

3.参考代码

二、事件委托

1.概念

2.使用案例

3.阻止冒泡行为

相关文章：