事件冒泡与默认行为

原文: 事件冒泡与默认行为

在说事件冒泡之前,我们先说说事件对象(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 = false;
      
                  }else{
      
                      //IE不支持
      
                      event.preventDefault();
      
                  }
      
              }
    4. jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()
  3. 如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

 

你可能感兴趣的:(事件冒泡)