首页 > 代码库 > 事件冒泡与默认行为

事件冒泡与默认行为

2024-11-25 07:36:39   203人阅读

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

Event

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

 

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

 

　　

事件冒泡

  1. 什么是事件冒泡
    1. 即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点
    2. 所有浏览器都支持事件冒泡
      <!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层次结构像水泡一样不断向上直至顶端

  2. 　　阻止事件冒泡
    1. DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
    2. IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用
      1. /*         封装事件冒泡函数：         document.all:判断浏览器是否是IE         IE：cancelBubble         Firefox：stopPropagation        */        function stopPropagation(e){             var e = window.event || e;             if(document.all){                  e.cancelBubble = true;             }else{                  e.stopPropagation();             }        }

         

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

默认行为

  1. 什么是默认行为
    1. 网页元素，都有自己的默认行为，例如，单击超链接会跳转...
  2. 阻止默认行为
    1. DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
    2. IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用
    3. /*            封装阻止元素的默认行为函数            IE：returnValue            DOM：preventDefault         */        function preventDefaultAction(event){            var event = window.event || event;            if(document.all){                //支持IE                event.returnValue = http://www.mamicode.com/false;            }else{                //IE不支持                event.preventDefault();            }        }
    4. jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()
  3. 如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

 

事件冒泡与默认行为


联系
我们