百度网站推广方案,建设部网站 绿色建筑评价表,网站建设所需物资,商城网站建设功能点价格目录 事件流总结#xff1a; 事件捕获示例#xff1a; 事件冒泡阻止冒泡#xff08;阻断事件流动传播#xff0c;不止在冒泡阶段有效#xff0c;捕获阶段也有效#xff09;解绑事件鼠标经过事件的区别#xff1a; 事件流 事件流指的是事件完整执行过程中的流动路径。 事… 目录 事件流总结 事件捕获示例 事件冒泡阻止冒泡阻断事件流动传播不止在冒泡阶段有效捕获阶段也有效解绑事件鼠标经过事件的区别 事件流 事件流指的是事件完整执行过程中的流动路径。 事件流是对事件执行过程的描述了解事件的执行过程有助于加深对事件的理解提升开发实践中对事件运用的灵活度。 任意事件被触发时总会经历两个阶段捕获阶段和冒泡阶段。
简言之捕获阶段是从父到子的传导过程冒泡阶段是从子向父的传导过程。 结合事件流的特征我们知道当某个元素的事件被触发时事件总是会先经过其祖先才能到达当前元素然后再由当前元素向祖先传递事件在流动的过程中遇到相同的事件便会被触发。 事件的执行顺序是可控制的即可以在捕获阶段被执行也可以在冒泡阶段被执行。 如果事件是在冒泡阶段执行的我们称为冒泡模式它会先执行子盒子事件再去执行父盒子事件默认是冒泡模式。 如果事件是在捕获阶段执行的我们称为捕获模式它会先执行父盒子事件再去执行子盒子事件。
总结
addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener 第3个参数为 true 表示捕获阶段触发false 表示冒泡阶段触发默认值为 false事件流只会在父子元素具有相同事件类型时才会产生影响绝大部分场景都采用默认的冒泡模式其中一个原因是早期 IE 不支持捕获
事件捕获
概念从DOM的根元素开始去执行对应的事件从外到里事件捕获需要对应代码才能看到效果代码DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)说明 addEventListener第三个参数传入ture代表是捕获阶段触发很少使用若传入false代表冒泡阶段触发默认是false
示例
点击son的盒子部分会依次显示
div classfatherdiv classson/div/divscriptconst fa document.querySelector(.father)const son document.querySelector(.son)document.addEventListener(click, function () {alert(grandpa)}, true)fa.addEventListener(click, function () {alert(father)}, true)son.addEventListener(click, function () {alert(son)}, true)/scriptstyle.father {width: 300px;height: 200px;background-color: aquamarine;}.son {width: 100px;height: 50px;background-color: bisque;}/style事件冒泡
概念当一个元素的事件被触发时同样的事件会在该元素的所有祖先元素中依次触发。 即当一个元素触发事件后会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的L2事件监听第三个参数是false或者默认都是冒泡
案例只要把上面事件捕获代码的true删除就行。
阻止冒泡阻断事件流动传播不止在冒泡阶段有效捕获阶段也有效
前提阻止事件冒泡需要拿到事件对象语法事件对象.stopPropagation()此方法可以阻断事件流动传播不止在冒泡阶段有效捕获阶段也有效
son.addEventListener(click, function (e) {alert(son)// 阻止流动传播e.stopPropagation()})解绑事件
on事件方式直接使用null覆盖就可以实现
buttonclick/button
scriptconst btndocument.querySelector(button)btn.onclickfunction(){alert(click)btn.onclicknull}
/scriptaddEventListener方式必须使用 removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段]) []代表可以省略
注意匿名函数无法被解绑
buttonclick/buttonscriptconst btn document.querySelector(button)function fn() {alert(click)}btn.addEventListener(click, fn)// L2事件移除btn.removeEventListener(click, fn)鼠标经过事件的区别
mouseover 和 mouseout 会有冒泡效果mouseenter 和 mouseleave 没有冒泡效果 (推荐)
