zoukankan      html  css  js  c++  java
  • 事件冒泡

    #转载请留言联系

    • 什么是事件冒泡?

    事件冒泡,指代在js中,被包含的子标签一旦触发了某种事件,那么父元素的同名事件也会被逐层触发,一直到没有父标签的html标签中。

    • 事件冒泡示例

    创建一个大的框框,背景色为绿色。然后在大框框里创建一个小框框,背景色为红色。需求是当点大框框的内容时,大框框的背景色变成蓝色。当点小框框的内容时,小框框的背景色变成蓝色。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bigbox{
                width: 500px;
                height: 500px;
                background: green;
            }
            .littlebox{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $('.bigbox').on('click',function(event){
                    $(this).css({"background":"blue"});
                })
                $('.littlebox').on('click',function(event){
                    $(this).css({"background":"blue"});
                })
            })
        </script>
    </head>
    <body>
        <div class="bigbox">
            <div class="littlebox"></div>
        </div>
    </body>
    </html>

    实验:当点击大框框时,背景颜色的确变成蓝色了,而且小框框的背景色保持不变,还是红色。但是!当点击小框框时,大框框小框框的背景颜色都变成蓝色了!这边是事件冒泡。子标签一旦触发了某种事件,那么父元素的同名事件也会被逐层触发,一直到没有父标签的html标签中。

    • 阻止事件冒泡

    1.event.target

    target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bigbox{
                width: 500px;
                height: 500px;
                background: green;
            }
            .littlebox{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $('.bigbox').on('click',function(event){
                    $(event.target).css({"background":"blue"});
                })
                $('.littlebox').on('click',function(event){
                    $(event.target).css({"background":"blue"});
                })
            })
        </script>
    </head>
    <body>
        <div class="bigbox">
            <div class="littlebox"></div>
        </div>
    </body>
    </html>

    2.return false

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bigbox{
                width: 500px;
                height: 500px;
                background: green;
            }
            .littlebox{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $('.bigbox').on('click',function(event){
                    $(this).css({"background":"blue"});
                })
                $('.littlebox').on('click',function(event){
                    $(this).css({"background":"blue"});
                    return false;
                })
            })
        </script>
    </head>
    <body>
        <div class="bigbox">
            <div class="littlebox"></div>
        </div>
    </body>
    </html>

    3.stopPropagation

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bigbox{
                width: 500px;
                height: 500px;
                background: green;
            }
            .littlebox{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $('.bigbox').on('click',function(event){
                    $(this).css({"background":"blue"});
                })
                $('.littlebox').on('click',function(event){
                    $(this).css({"background":"blue"});
                    event.stopPropagation()
                })
            })
        </script>
    </head>
    <body>
        <div class="bigbox">
            <div class="littlebox"></div>
        </div>
    </body>
    </html>
    • 事件冒泡的意义

    那么,事件冒泡有什么意义呢?还只是一个累赘?其实事件冒泡大有用处!

    在某种特殊场合下,我们可以通过给父元素添加事件,可以减少批量对子元素添加事件的性能消耗。例如,我们一个ul里面由5000个li,给每一个li添加事件,和给一个ul添加事件,性能的差距是5000倍!

    示例(当点击标题是背景变成蓝色,其他标签变回底色):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $('.list').on('click',function(event){
                    $(event.target).css({"background":"blue"}).siblings().css({"background":"white"});
                })
            })
        </script>
    </head>
    <body>
        <ul class="list">
            <li>第一个标题</li>
            <li>第二个标题</li>
            <li>第三个标题</li>
            <li>第四个标题</li>
            <li>第五个标题</li>
        </ul>
    </body>
    </html>
  • 相关阅读:
    洛谷—— P2234 [HNOI2002]营业额统计
    BZOJ——3555: [Ctsc2014]企鹅QQ
    CodeVs——T 4919 线段树练习4
    python(35)- 异常处理
    August 29th 2016 Week 36th Monday
    August 28th 2016 Week 36th Sunday
    August 27th 2016 Week 35th Saturday
    August 26th 2016 Week 35th Friday
    August 25th 2016 Week 35th Thursday
    August 24th 2016 Week 35th Wednesday
  • 原文地址:https://www.cnblogs.com/chichung/p/9714459.html
Copyright © 2011-2022 走看看