浅谈--事件冒泡和阻止默认行为

      一.事件冒泡

    在页面上可以有多个事件，也可以多个元素响应同一个事件，比如有这样一个场景，在网页上的body标签中，有两个嵌套的div，这时我们通过代码给

body标签和两个div标签注册click事件，当你单击内层的div时外层的div和body标签的事件也触发的，这就是事件冒泡。

    二.如何停止事件冒泡

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        /*
        构建场景：在body标签中有一div标签在一个div标签中有嵌套一个div标签
        现在要给body，第一个div，第二个div标签加上click事件。
        */
        $(function () {
            /*
            1.当单击内层div时：冒泡的顺序是：总里到外：内层div----外层div-----body
            2.当单击内层div时，自身的背景颜色变了，外层div背景颜色也变了甚至连body的背景颜色也变了
            3.解决方案：
               只需要为函数添加一个参数event即可，当单击某个元素时，事件对象就被创建了，这个事件对象
               只有只有事件处理函数才能访问到，事件对象就别销毁。
            4.停止事件冒泡：
               这里用到了even.stopPropagation（）
            5. 可以把 even.stopPropagation();简写成return false
            */
            //给body标签注册单击事件给body标签加上背景颜色
            $("body").click(function (even) {
                $(this).css("background", "blue");
                even.stopPropagation();
               // return false;
            });
            //给id为menu（外层div）标签注册单击事件给外层div标签加上背景颜色
            $("#menu").click(function (even) {
                $(this).css("background", "red");
                even.stopPropagation();
                //return false;
            });
            //给id为childen（内层div）标签注册单击事件给内层div标签加上背景颜色
            $("#childen").click(function (even) {
                $(this).css("background", "pink");
               even.stopPropagation();
               // return false;
            });
        });

    </script>
</head>
<body>
    我是body
    <div id="menu">
        我是外层div
        <div id="childen">我是内存div</div>
    </div>
</body>
</html>

      三.阻止默认行为

  网页中的元素有自己的默认的行为，例如，单击超链接会跳转，单击提交按钮会提交表单，但我门有时候要阻止这种默认行为，比如，当你点击提交按钮时，用户名为空此时就要

阻止默认行为。

     

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #menu {
        width:500px;
        height:500px;
        margin:0px auto;
        }
    </style>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        /*
        阻止默认行为
        */
        $(function () {
            $("input[type=submit]").click(function (event) {
                //获取到文本内容
                var name = $("input[type=text]").val();
               if (name=="") {
                   $("#result").html("用户名不能为空！");
                   event.preventDefault();//阻止默认行为
               }
            });
        });
    </script>
</head>
<body>
    <form action="/" method="post">
        <div id="menu">
             用户名：<input type="text" name="name"/>
        <input type="submit" name="name" value="提交" />
        <div id="result"></div>
        </div>
    </form>
</body>
</html>

posted @ 2016-05-24 09:11  hyjj  阅读(276)  评论(0)    收藏  举报