zoukankan      html  css  js  c++  java
  • 事件冒泡与事件捕获,附实例

    事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
    事件捕获,即不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
    由于老版本的浏览器不支持事件捕获,因此很少有人用。建议大家放心使用事件冒泡,在有特殊需要时再使用事件捕获。


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    </head>
    <body>
        <div id="myDiv1" style="background: #00ad36;height: 300px; 300px;position: relative;">
            <div id="myDiv2" style="background: #00a0e9;height: 100px; 100px;left: 50%;top:50%;position: absolute;margin-left: -50px;margin-top: -50px;text-align: center;line-height: 100px;">Click</div>
        </div>
        <script type="text/javascript">
            $('#myDiv1').click(function () {
               console.log('点击了外部的DIV');
            });
            $('#myDiv2').click(function () {
                console.log('点击了内部的DIV');
            });
        </script>
    </body>
    </html>





  • 相关阅读:
    jquery $.each遍历json数组方法
    JQuery插件编写
    创建JAVASCRIPT对象3种方法
    微信开发流程
    有关索引那点事
    获取数据库内所有的表和表内字段的信息
    asp.net MVC4 异步文件上传
    QT学习:01 工程文件详解
    QT学习:00 介绍
    Linux 系统编程 学习 总结
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924988.html
Copyright © 2011-2022 走看看