JS的冒泡事件

---

---

JS的冒泡事件

什么是冒泡事件？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window） -摘自网络

这里使用简单的一个demo来演示一下js中的冒泡事件

效果图

布局

<div class="first_div">
    最外层div
    <div class="second_div">
        中间层
        <div class="third_div">
            最里层
        div>
    div>
div>
<div class="msg_div">div>

也就是三个DIV分别为不同的背景色

CSS

    <style type="text/css">

        div {

            border: solid 1px deepskyblue;
            padding: 2em;
            width: 30%
        }

        div .third_div {

            background-color: red;
        }

        div .second_div {

            background-color: deepskyblue;
        }

        .first_div {

            height: auto;
            background-color: lawngreen;
        }
    style>

jquery添加事件并且在点击后有对应文本输出显示

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
<script type="text/javascript" language="JavaScript">

    //    alert(parseInt(Math.floor(Math.random() * 10)));
    $(function () {
        $('.third_div').bind('click', function (event) {

            func("你点击最里层DIV")
//            event.stopPropagation();
//            return false;
        });

        $('.second_div').bind('click', function (event) {

            func("你点击了中间层DIV")
            //            event.stopPropagation();
//            return false;
        });
        $('.first_div').bind('click', function (event) {

            func("你点击了最外层DIV")
//            event.stopPropagation();
//            return false;
        });
        $('body').bind('click', function () {

            func("你点击了body");
//            event.stopPropagation();
//            return false;
        })
    })

    var colorArray = new Array("blue", "grey", "green", "red", "orangered", "darkviolet", "orange", "crimson", "chartreuse", "black");

    var count = 0;
    var func = function (str) {
        count++;
        var child = $("
");
        child.css({
            "color": colorArray[parseInt(Math.floor(Math.random() * 10))],
            "border": "solid 1px grey",
            "padding": "0.5em"
        });
        child.text(count + ":" + str);
        $('.msg_div').append(child);
        if (count % 3 === 0) {
            count = 0;
            $('.msg_div div:last-child').after("
");
        }
    };
script>

在最里层添加了阻止代码后效果

我们可以很明显的看到在使用了阻止的对应方法后，事件没有继续往上层走，被拦截在了当前这一层。

总结

阻止事件冒泡的几种方法


第一种： event.stopPropagation();
第二种： return false;
第三种： event.preventDefault();