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>

    浏览器效果:

  • 相关阅读:
    smokeping一键安装脚本
    IIS与Apache禁止IP地址直接访问网站
    linux 常用命令
    ELK安装
    MySQL5.7安装
    Centos7 动态创建文件系统
    python学习第十六天 内置函数2,匿名函数
    python学习第十五天 内置函数1
    python学习第十四天 生成器函数进阶 生成器表达式 各种推导式
    python学习第十三天 迭代器 生成器
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9602021.html
Copyright © 2011-2022 走看看