jquery——事件冒泡、事件委托

一个事件冒泡的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('body').click(function () {
                alert(4);
            });

            $('.grandfather').click(function () {
                alert(3);
            });
            $('.father').click(function () {
                alert(2);
            });
            $('.son').click(function () {
                alert(1);
            });
        })
    </script>
    <style type="text/css">
        .grandfather{
            300px;
            height:300px;
            background-color: gold;
            position: relative;
        }
        .father{
            200px;
            height:200px;
            background-color: hotpink;
        }
        .son{
            100px;
            height:100px;
            background-color: chartreuse;
            position: absolute;
            left:0;
            top:400px;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

事件冒泡有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止

 $('body').click(function (event) {
                alert(4);
                event.stopPROpagation();
 });

阻止默认行为：（阻止右键菜单）

$(document).contextmenu(function(event){
    event.preventDefault();
})

合并阻止操作：

实际开发中一般把阻止冒泡和阻止默认行为合并起来写

return false；

eg：（弹框--阻止冒泡）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#pop').show();
                return false;
            });
            $('#shutoff').click(function () {
                $('#pop').hide();
            });
            $(document).click(function (event) {
                $('#pop').hide();
            });
            $('.pop').click(function () {
                return false;
            })
        })
    </script>
    <style type="text/css">
        .pop_con{
            /*暂时隐藏*/
            display: none;
        }
        .pop{
             300px;
            height:200px;
            background-color: #fff;
            border:1px solid #000;

            /*使框居中*/
            position: fixed;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top: -100px;
            /*让弹窗覆盖在mask上面*/
            z-index:9999;
        }
        .mask{
            position: fixed;
            100%;
            height: 100%;
            background-color: #000;
            left:0;
            top:0;
            /*设置透明度*/
            opacity:0.3;
            /*ie兼容的透明度*/
            filter:alpha(opacity=0.3);
            /*让弹窗覆盖在mask上面*/
            z-index:9990;
        }
    </style>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <input type="button" name="" value="弹出" id="btn">
    <!--自制弹框-->
    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutoff">关闭</a>
            <input type="text" name="">
        </div>
        <div class="mask">mask</div>
    </div>
</body>
</html>

事件委托：利用事件冒泡原理把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也拥有相同的操作。

<script type="text/javascript">
        <!--事件委托写法-->
        $(function () {
            $('.list').delegate('li','click',function () {
                alert($(this).html());

               //取消委托
               $('.list').undelegate();

}); }) </script>