事件冒泡

Posted 2022-06-13 leevmh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡相关的知识，希望对你有一定的参考价值。

　　事件冒泡是事件流的第三个阶段，通过事件冒泡可以在这个阶段对事件做出响应。

　　关于冒泡，事件对象中包含bubbles、cancelBubble、stopPropagation()和stopImmediatePropagation()这四个属性和方法。

　　bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性。

　　发生在文档元素上的大部分事件都会冒泡，但focus、blur和scroll事件不会冒泡。所以，除了这三个事件bubbles属性返回了false外，其它事件该属性都为true。

    <button id="test" style="height: 30px;width: 200px;"></button>
    <script>
        //点击按钮时，按钮内容为true，说明click事件默认可冒泡
        var test = document.getElementById(‘test‘);
        test.onclick = function(e)
            test.innerhtml =e.bubbles;//true
        
    </script>

    <div id="box" style="height: 50px;width: 200px;overflow:scroll;background:pink;line-height:60px;">内容</div>
    <script>
        //滚动时，div内容变成false，说明scroll事件默认不可冒泡
        var box = document.getElementById(‘box‘);
        box.onscroll = function(e)
            test.innerHTML = e.bubbles;//false
        
    </script>

stopPropagation()方法表示取消事件的进一步捕获或冒泡，无返回。不能阻止同一事件的其它监听函数被调用

　　注意：ie8 浏览器不支持

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <button id="btn">触发</button>
            <script type="text/javascript">
                var btn = document.getElementById(‘btn‘);
                btn.onclick = function (e)
                    e = e || event;
                    e.stopPropagation();
                    this.innerText = ‘阻止冒泡‘;
                
                document.body.onclick = function (e)
                    alert(‘冒泡‘);
                
            </script>
        </body>
    </html>

　　stopImmediatePropagation()方法不仅可以取消事件的进一步捕获或冒泡，而且可以阻止同一个事件的其他监听函数被调用，无返回值

　　[注意]IE8-浏览器不支持

　　使用stopIPropagation()方法，可以阻止冒泡，但无法阻止同一事件的其他监听函数被调用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <button id="btn" style="width: 200px;">触发</button>
            <script type="text/javascript">
                var btn = document.getElementById(‘btn‘);
                // 可以阻止冒泡,但无法阻止同一事件的其他监听函数被调用
                btn.addEventListener(‘click‘,function (e)
                    e = e || event;
                    e.stopPropagation()
                    this.innerHTML = ‘修改了‘;
                )
                btn.addEventListener(‘click‘,function (e)
                    e = e || event;
                    this.style.backgroundColor = ‘lightblue‘;　　　　//使用stopIPropagation()，该函数还会执行
                )
                document.body.addEventListener(‘click‘,function ()
                    alert(‘body‘);　　　　　　　　　　　　　　　　　　　　　　//使用stopIPropagation()，该函数不执行
                )
            </script>
        </body>
    </html>

使用stopImmediatePropagation()方法，即可以阻止冒泡，也可以阻止同一事件的其他监听函数被调用

    <button id="btn" style="width: 200px;">触发</button>
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        // 可以阻止冒泡,但无法阻止同一事件的其他监听函数被调用
        btn.addEventListener(‘click‘,function (e)
            e = e || event;
            e.stopImmediatePropagation()
            this.innerHTML = ‘修改了‘;
        )
        btn.addEventListener(‘click‘,function (e)
            e = e || event;
            this.style.backgroundColor = ‘lightblue‘;　　　　　　//使用stopImmediatePropagation()方法，该函数不执行
        )
        document.body.addEventListener(‘click‘,function ()
            alert(‘body‘);　　　　　　　　　　　　　　　　　　　　　　　//使用stopImmediatePropagation()方法，该函数不执行
        )
    </script>

canceBubble属性只能用于阻止冒泡，无法阻止捕获阶段。该值可读写，默认值为false。当设置为true是，cancelBubble可以取消事件冒泡

[注意]该属性全浏览器支持，但并不是标准写法

    <button id="btn">触发</button>
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        btn.onclick = function (e)
            e = e || event;
            e.cancelBubble = true;
            this.innerText = ‘阻止冒泡‘;
        
        document.body.onclick = function (e)
            alert(‘冒泡‘);
        
    </script>

阻止事件冒泡的兼容性写法

    var handler = function(e)
        e = e || event;
        if(e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble = true;

以上是关于事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章