网站开发人员调试,哪个网站可预约做头发,seo技术手段,简洁大方网站模板提示#xff1a;事件捕获#xff0c;事件冒泡#xff0c;事件委托 目录
事件模型(DOM事件流)
1.事件是什么
2.事件流
1).事件流的三个阶段
3.参考代码
二、事件委托
1.概念
2.使用案例
3.阻止冒泡行为 事件模型(DOM事件流)
1.事件是什么
1). 事件是HTML和Javascr… 提示事件捕获事件冒泡事件委托 目录
事件模型(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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodydiv idfatherdiv idsonson元素/div/divscriptvar 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodyulli classactive导航1/lili导航2/lili导航3/lili导航4/lili导航5/li/ulscript// 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);/scriptolli classactive导航1/lili导航2/lili导航3/lili导航4/lili导航5/li/olscript// 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()//阻止冒泡行为
