事件流阻止事件流动

野原新之助real

于 2023-01-06 21:24:23 发布

阅读量182

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_56769908/article/details/128584521

版权

1.事件流与两个阶段说明

事件流指事件完整执行过程中的流动路径

Document--->html-->body-->div 捕获阶段

div-->body-->html-->Document 冒泡

捕获是父到子冒泡是子到父

事件的捕获和事件冒泡

冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中一次被触发

事件冒泡一直存在

点击后father接着触发

必须是同名事件才会冒泡

事件捕获

概念：从dom的根元素开始去执行的事件（从外到里）

事件捕获要代码才能看到效果

Dom.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明：第三个参数传入true代表是捕获阶段触发（很少使用）

若传入FALSE代表冒泡阶段触发默认就是false

L0事件监听只有冒泡没有捕获

捕获

2.3 阻止事件流动

因为默认就有冒泡存在所以容易导致事件影响到父元素

想把事件限制于当前元素内，就要阻止事件流动

阻止事件流动必须拿到事件对象

事件对象.stopPropagation()

鼠标经过事件

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果（推荐）

阻止默认行为，比如连接不跳转

  e.preventDefault()

2.4 事件委托

目标：能说出事件委托的好处

<body>
   <ul>
    <li>我是第1个小li</li>
    <li>我是第2个小li</li>
    <li>我是第3个小li</li>
    <li>我是第4个小li</li>
    <li>我是第5个小li</li>
   </ul>
   <script>
    //不要每个小li注册事件了，而是把事件委托给他的爸爸
    // 事件委托给父级元素添加事件 而不是给儿子添加
    let ul=document.querySelector('ul')
    ul.addEventListener('click',function(){
        alert('我点击了')  
        //现在只给ul绑定就可给li绑定
        // 点击li时冒泡 爸爸ul有点击事件 触发
        
    })
   </script>
</body>

 //得到当前元素
        //  console.log(e.target)
        e.target.style.color='red'

找到真正触发的元素 e.target 事件对象.target

野原新之助real

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件流阻止事件流动

事件流指事件完整执行过程中的流动路径Document--->html-->body-->div 捕获阶段div-->body-->html-->Document 冒泡。
复制链接

扫一扫