事件流——捕获和冒泡

最新推荐文章于 2024-04-19 10:18:52 发布

月吟霜

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量812

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46511756/article/details/125577190

版权

事件流就是：事件在执行的过程中的一种描述，合理利用可以提升开发实践中的灵活度。

任何时间被触发时总会经历两个阶段：【捕获阶段】【冒泡阶段】

【捕获阶段】是从外向内【冒泡阶段】是从内向外

当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

一般冒泡用的多一些～

//来一个小小案例

<!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>
        ul {
            width: 100%;
            height: 400px;
            border: 1px solid #000;
        }
        
        ul li {
            border: 1px solid #000;
        }
        
        p {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <p>aaaa</p>
    </ul>

    <script>
        //利用冒泡，点击li可以冒泡到ul上的点击事件
        const ul = document.querySelector('ul')
        console.log(ul);
        ul.addEventListener('click', function(e) {
            //console.log(1);
            //console.log(e.target.tagName) 
            //利用事件对象判断
            if (e.target.tagName === 'LI') {
                console.log(1);
            }
            // console.log(e.srcElement)
        })
    </script>
</body>

</html>

事件捕获

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

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用），传入false代表冒泡阶段触发，默认就是false，如果用的LO事件监听，则只有冒泡阶段，没有捕获

阻止冒泡

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。事件对象中的e.stopPropagation()方法，专门用来阻止事件冒泡。

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果

<!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>
        .outer {
            width: 500px;
            height: 500px;
            background-color: #f00;
        }
        
        .inner {
            width: 300px;
            height: 300px;
            background-color: #0f0;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <h3>阻止冒泡</h3>
    <p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
    <div class="outer">
        <div class="inner">
            <div class="child"></div>
        </div>
    </div>
    <script>
        // 获取嵌套的3个节点
        const outer = document.querySelector('.outer')
        const inner = document.querySelector('.inner')
        const child = document.querySelector('.child')

        // 外层的盒子
        outer.addEventListener('click', function() {
            console.log('outer...')
        })

        // 中间的盒子
        inner.addEventListener('click', function(ev) {
            console.log('inner...')

            // 阻止事件冒泡
            ev.stopPropagation()
        })

        // 内层的盒子
        child.addEventListener('click', function(ev) {
            console.log('child...')

            // 借助事件对象，阻止事件向上冒泡
            ev.stopPropagation()
        })
    </script>
</body>

</html>

阻止默认行为发生

某些情况需要阻止默认行为的发生，比如阻止链接的跳转、表单域的跳转

语法：e.preventDefault()

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
    // xxxxx
})

元素滚动事件

滚动条在滚动的时候持续触发的事件

window.addEventListener('scroll', function() {
    // xxxxx
})

页面尺寸时间

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {
    // xxxxx
})

元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHeight

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

月吟霜

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
事件流——捕获和冒泡

事件流就是：事件在执行的过程中的一种描述，合理利用可以提升开发实践中的灵活度。任何时间被触发时总会经历两个阶段：【捕获阶段】【冒泡阶段】【捕获阶段】是从外向内【冒泡阶段】是从内向外一般冒泡用的多一些～来一个小小案例阻止冒泡阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。事件对象中的方法，专门用来阻止事件冒泡。鼠标经过事件：mouseover 和 mouseout 会有冒泡效果mouseenter 和 mouseleave 没有冒泡效果
复制链接

扫一扫