前端小白的学习之路(事件流)
提示：事件捕获，事件冒泡，事件委托
目录
事件模型(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()//阻止冒泡行为