Javascript Event（事件）的传播与冒泡

  按钮

    StopPropagation

    cancelBubble

  cont阻止捕获或冒泡

$(function(){

    var$log = $('.log'),

      $wrap = $('.wrap'),

      $cont = $('.cont'),

      $btn = document.getElementById('btn'),

      $stopType = $('#stopType'),

      $body = $('body'),

      $inTxt = $('#inTxt'),

      $btnReject = $('#btnReject');

    varePhase = ["","捕获","目标","冒泡"]

    varsetBorderColor =function( $dom, color, time,event){

      $dom = $($dom);

      $log.html($log.html() + $dom.attr('class') +'['+ ePhase[event.eventPhase] +']'+'
')

      vartimeIndex = window.setTimeout(function(){  

      $dom.css({

        'borderColor': color,

        'borderWidth':'4px'

      });

      }, time);

    } 

    //捕获

    $body[0].addEventListener('click',function(event){

      $log.html($log.html() +"-------------------
");

      setBorderColor($body,'#0866ff ',0,event);

    },true); 

    $wrap[0].addEventListener('click',function(event){

      setBorderColor($wrap,'yellow',2000,event);

    },true);

    $cont[0].addEventListener('click',function(event){

      event = event || window.event;

      if( $stopType.val() =='1'){

        event.stopPropagation();

      }else{

        event.cancelBubble =true;

      }

      setBorderColor($cont,'green',1000,event); 

    },true);

    $btn.addEventListener('click',function(event){

      setBorderColor($btn,'red',0,event);

    },true);

    $btnReject[0].addEventListener('click',function(event){

      setBorderColor($btnReject,'gray ',0,event);

    },true);

    //冒泡

    $body[0].addEventListener('click',function(event){

      setBorderColor($body,'#0866ff ',0,event);

    },false);

    $wrap[0].addEventListener('click',function(event){

      setBorderColor($wrap,'yellow',2000,event);

    },false);

    $cont[0].addEventListener('click',function(event){

      setBorderColor($cont,'green',1000,event); 

    },false);

    $btn.addEventListener('click',function(event){

      setBorderColor($btn,'red',0,event);

    },false);

    $btnReject[0].addEventListener('click',function(event){

      setBorderColor($btnReject,'gray ',0,event);

    },false);

    //阻止默认事件

    $inTxt.keypress(function(event){

      //event.preventDefault();

      window.event.returnValue =false;

      $body.append( String.fromCharCode( event.keyCode ));

    });

  });