当前位置：网站首页>事件流的说明》

事件流的说明》

2022-06-30 09:35:00 【zimingyo】

事件流与两个阶段说明

事件流：是指事件完整执行过程中的流动路径
两个阶段：捕获阶段（父到子）和冒泡阶段（子到父）

事件捕获和事件冒泡

事件冒泡

  • 概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
  • 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（指触发事件类型相同：同为click）
  • 事件冒泡是默认存在的
    事件捕获
  • 概念：从DOM的根元素开始去执行对应得事件（从外到里）
  • 事件捕获需要写对应代码才能看到效果
  • 代码DOM．addEventListener(事件类型，事件处理函数，是否使用捕获机制)
  • 说明：
    addEventListener第三个参数传入true代表时捕获阶段触发（很少使用）
    若传入false代表冒泡阶段触发，默认就是false
    若是用L0事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

  • 因为默认就有冒泡模式得存在，所以容易导致事件影响到父级元素
  • 若想把事件就限制在当前元素内，就需要阻止事件流动
  • 阻止事件流动需要拿到事件对象
  • 语法：事件对象.stopPropagation()
  • 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。

鼠标经过事件：

  • mouseover和mouseout 会有冒泡效果
  • mouseenter和mouseleave 没有冒泡效果

阻止默认行为：比如链接点击不跳转，表单域得不提交
语法：e.preventDefault()

两种注册事件的区别
传统on注册（L0）

bt.οnclick=function(){}
  1. 同一个对象，后面注册的事件会覆盖前面注册的事件
<body>
<button>点击</button>
<script> let bt=document.queryselect('button') bt.onclick=function(){
       alter(11) } bt.onclick=function(){
       alter(12) } //执行结果为12 </script>
</body>
  1. 直接使用null覆盖就可以实现事件的解绑
bt.οnclick=null
  1. 都是冒泡阶段执行的

事件监听注册（L2）

bt.addEventListener('click',function(){})

bt.addEventListener(‘click’,函数名)

function 函数名（）{}
  1. 语法：addEventListener(事件类型，事件处理函数，是否使用捕获) [true是捕获，false是冒泡（默认）]
  2. 后面注册的事件不会覆盖前面注册的事件（同一个事件）
  3. 可以通过第三个参数去确定是在冒泡或者捕获阶段
  4. 必须使用removeEventListener(事件类型，事件处理函数，是否使用捕获)
bt.addEventListener('click',add)
function add(){
alter(35)
}

bt.removeEventListener('click',add)
//无法得到35
  1. 匿名函数无法被解绑（适用于第二种形式）
原网站

版权声明
本文为[zimingyo]所创，转载请带上原文链接，感谢
https://blog.csdn.net/zimingyo/article/details/125024860

边栏推荐

猜你喜欢

随机推荐