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>

    浏览器效果:

  • 相关阅读:
    代替gets()的新操作
    前缀和(一维与二维) 差分
    高精度(高精加,高精减,高精乘,高精除)
    提高cin cout的速度
    二分算法(以 数的范围 为例)
    归并排序(merge_sort)
    快速排序(quick_sort)
    由后缀表达式题目:stoi atoi 函数新发现
    Redis(二)
    每日算法练习(2020-1-11)
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9602021.html
Copyright © 2011-2022 走看看