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

    事件冒泡有空补充(印象笔记里)

    事件捕获

    浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。

    利用事件监听可以使浏览器,由外向里逐渐触发事件,这种行为叫做事件捕获。

    事件流:
    事件冒泡,由里向外逐渐触发事件。
    事件捕获,由外向里逐渐触发事件。

    代码示例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>事件捕获</title>
            <style>
                div{padding: 50px}
                #div1{background-color: red}
                #div2{background-color: blue}
                #div3{background-color: orange}
            </style>
            <script>
                window.onload = function(){
                    var aDivs = document.getElementsByTagName('div');
                    for(var i = 0; i < aDivs.length; i++){
                        //通过事件监听的方式添加事件就会 看到的现象就会和事件冒泡的方向相反
                        aDivs[i].addEventListener("click", function(){
                            alert(this.id);
                        }, true);
                    }
    
                    /*
                        事件冒泡的浏览器兼容写法
                     */
    /*
                    function stopBubble(e){
                        if(e.cancelBubble){
                            e.cancelBubble = true;
                        }else{
                            e.stopPropagation();
                        }
                    }
    */
    
                    /*
                        阻止事件冒泡
    
    
                     */
                }
                /*
                    上述的行为是浏览器的默认行为。
                    浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。
    
                    事件流:
                    事件冒泡,由里向外逐渐触发事件。
                    事件捕获,由外向里逐渐触发事件。
    
                 */
            </script>
        </head>
        <body>
            <div id = 'div1'>
                <div id = 'div2'>
                    <div id = 'div3'></div>
                </div>
            </div>
        </body>
    </html>

    浏览器效果:

  • 相关阅读:
    UVA 1025 A Spy in the Metro DP水题
    ZOJ 3814 Sawtooth Puzzle BFS
    ZOJ 3816 Generalized Palindromic Number
    UVA 10859 Placing Lampposts 树形DP
    UVA 11825 Hackers' Crackdown 状压DP
    POJ 2887 Big String 线段树 离线处理
    POJ 1635 Subway tree systems Hash法判断有根树是否同构
    BZOJ 3110 k大数查询 & 树套树
    sdoi 2009 & 状态压缩
    来自于2016.2.24的flag
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9602021.html
Copyright © 2011-2022 走看看