认识事件冒泡和事件捕获

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

称它为冒泡，是因为事件会按照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　　　　　指向原生的事件对象

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