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

    一.事件冒泡就是多个元素同时响应了同一个事件,前提是这些元素都绑定了这一个事件。这只是我的定义,感觉好理解些。

    称它为冒泡,是因为事件会按照DOM元素的层次结构依次执行,就像水泡一样不断浮向顶端。所以称之为事件冒泡。

    这个图便于理解,我用箭头来代替冒泡:

    二.事件捕获与事件冒泡触发顺序相反,事件捕获从外层元素传到内层元素的。body—〉div—〉span。

    jquery不支持事件捕获,不是所有的浏览器支持事件捕获。

    三.通过demo来认识事件冒泡

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("span").bind("click", function () {
                    var text = $("#msg").html() + "<p>span元素单击事件</p>";
                    $("#msg").html(text);
                });
            });
            $(function () {
                $("#content").bind("click", function () {
                    var text = $("#msg").html() + "<p>div元素单击事件</p>";
                    $("#msg").html(text);
                });
            });
            $(function () {
                $("body").bind("click", function () {
                    var text = $("#msg").html() + "<p>body元素单击事件</p>";
                    $("#msg").html(text);
                });
            });
        </script>
        <title>BubbleEvent</title>
    </head>
    <body >
        <div id="content">
            DIV元素
            <span>SPAN元素</span>
        </div>
        <div id="msg"></div>
    </body>
    </html>

    依次点击span,div,body会出现效果图:(body的点击事件只作用于当前内容所占区域,而不是整个网页区域

    四.解决事件冒泡

    先认识下事件对象,在上面程式中添加一个参数event,点击span元素时,事件对象就会被创建,这个事件对象只有事件函数才能访问,事件函数处理完后

    事件对象会销毁。

    事件对象具有自己的属性

    jquery中stopPropagation()方法可以停止事件冒泡

      $(function () {
                $("span").bind("click", function (event) {
                    var text = $("#msg").html() + "<p>span元素单击事件</p>";
                    $("#msg").html(text);
                    alert(event.type);//event类型是click
                    event.stopPropagation(); //停止事件冒泡方法
                });
            });

    此时点击span元素效果:

    五.阻止默认行为

    网页中的元素都有自己的默认行为,例如点击a标签,会跳页,点击submit按钮会提交表单等。

    事件对象提供了preventDefault()方法。可以阻止默认行为。

    preventDefault()和stopPropagation()都可以用return false来代替。

    六.事件对象的几个属性

    event.target          获取触发事件的元素

    event.pageX/event.pageY  获得光标相当于页面的x坐标和y坐标

    event.which           获取鼠标的左,中,右键;键盘的按键

    event.metaKey        不同的浏览器对键盘Ctrl键解释不同,jquery对其进行封装成了metaKey()方法获取键盘事件中的Ctrl键

    event.originalEvent       指向原生的事件对象

    注:这几个属性没有实例测试。

  • 相关阅读:
    算法训练 表达式计算
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    New ways to verify that Multipath TCP works through your network
    TCP的拥塞控制 (Tahoe Reno NewReno SACK)
    Multipath TCP Port for Android 4.1.2
    How to enable ping response in windows 7?
    NS3
    Multipath TCP Port for Android
  • 原文地址:https://www.cnblogs.com/paulhe/p/3705674.html
Copyright © 2011-2022 走看看