事件冒泡与默认行为

时间：2015-02-02 09:29:26 阅读：131 评论：0 收藏：0 [点我收藏+]

标签：

在说事件冒泡之前，我们先说说事件对象（Event）

Event

在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
所有浏览器都支持Event对象，但支持方式不同
IE中的事件对象：window.event

　　　　　/*
            封装Event对象
            IE：window.event
         */
        function getEvent(event){
            return event?event:window.event;
        }

事件冒泡

什么是事件冒泡

即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点

所有浏览器都支持事件冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>事件冒泡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .one{
        width:400px;
        height:100px;
        border:1px solid #333;
    }
    .two{
        height:35px;
        line-height:35px;
        padding-left:15px;
        border:1px solid red;
    }
    .three{
        padding:10px;
        background-color: green;
        border:1px solid #999;
        cursor:pointer;
    }
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(function(){
        $(".one").click(function(event) {
            alert($(this).text());
        });
        $(".two").click(function(event) {
            alert($(this).text());
        });
        $(".three").click(function(event) {
            alert($(this).text());
        });
    });
</script>
</head>
<body>
    <div class="one">
        我是one(div)
        <p class="two">
            我是two（p）
            <span class="three">我是three（span）</span>
        </p>
    </div>
</body>
</html>

当在span、p、div元素上各绑定一个click事件，当单击span元素时，会依次触发三个事件，即span、p、div元素上的click事件，这就是事件冒泡，按照DOM层次结构像水泡一样不断向上直至顶端

　　阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行

IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用

/*
         封装事件冒泡函数：
         document.all:判断浏览器是否是IE
         IE：cancelBubble
         Firefox：stopPropagation
        */
        function stopPropagation(e){
             var e = window.event || e;
             if(document.all){
                  e.cancelBubble = true;
             }else{
                  e.stopPropagation();
             }
        }

jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

默认行为

什么是默认行为
1. 网页元素，都有自己的默认行为，例如，单击超链接会跳转...

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用

/*
            封装阻止元素的默认行为函数
            IE：returnValue
            DOM：preventDefault
         */
        function preventDefaultAction(event){
            var event = window.event || event;
            if(document.all){
                //支持IE
                event.returnValue = false;
            }else{
                //IE不支持
                event.preventDefault();
            }
        }

jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

事件冒泡与默认行为

标签：

原文地址：http://www.cnblogs.com/lonelyxmas/p/4266734.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行