javascript 事件 综合案例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body onclick="alert('current is body');">

  <div id="div0" onclick="alert('current is '+this.id)">
    <div id="div1" onclick="alert('current is '+this.id)">
      <div id="div2" onclick="alert('current is '+this.id)">
        <div id="event_source" onclick="alert('current is '+this.id)" style="height:200px;width:200px;background-color:red;"></div>
      </div>
    </div>
  </div>

<script type="text/javascript">

   var EventUtil = {
   addHandler: function(element, type, handler){
     if (element.addEventListener){
       element.addEventListener(type, handler, false);
     } else if (element.attachEvent){
       element.attachEvent("on" + type, handler);
     } else {
       element["on" + type] = handler;
     }
   },
   removeHandler: function(element, type, handler){
     if (element.removeEventListener){
       element.removeEventListener(type, handler, false);
     } else if (element.detachEvent){
       element.detachEvent("on" + type, handler);
     } else {
       element["on" + type] = null;
     }
   },
   getEvent: function(event){
     return event ? event : window.event;
   },
   getTarget: function(event){
     return event.target || event.srcElement;
   },
   preventDefault: function(event){
     if (event.preventDefault){
       event.preventDefault();
     } else {
       event.returnValue = false;
     }
   },
   stopPropagation: function(event){
     if (event.stopPropagation){
       event.stopPropagation();
     } else {
       event.cancelBubble = true;
     }
   }
 };

var div2 = document.getElementById('div2');

EventUtil.addHandler(div2, 'click', function(event){
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
}, false);

document.body.addEventListener('click', function(event){
    alert('document.body.addEventListener::current is body');
    event.stopPropagation();
}, true);

</script>
</body>

</html>

 

综合案例分析

最后结合下面HTML代码作分析:

复制代码
 1 <body onclick="alert('current is body');">  2   <div id="div0" onclick="alert('current is '+this.id)">  3     <div id="div1" onclick="alert('current is '+this.id)">  4       <div id="div2" onclick="alert('current is '+this.id)">  5         <div id="event_source" onclick="alert('current is '+this.id)" style="height:200px;width:200px;"></div>  6       </div>  7     </div>  8   </div>  9 </body> 10 
复制代码

HTML运行后点击红色区域,这是最里层的DIV,根据上面说明,无论是DOM标准还是IE,直接写在html里的监听处理函数是事件冒泡传递时调用的,由最里层一直往上传递,所以会先后出现 current is event_source current is div2 current is div1 current is div0 current is body

添加以下片段:

1 var div2 = document.getElementById('div2'); 2 EventUtil.addHandler(div2, 'click', function(event){ 3   event = EventUtil.getEvent(event); 4   EventUtil.stopPropagation(event); 5 }, false);

current is event_sourcecurrent is div2

当点击红色区域后,根据上面说明,在泡冒泡处理期间,事件传递到div2后被停止传递了,所以div2上层的元素收不到通知,所以会先后出现:

在支持DOM标准的浏览器中,添加以下代码:

1 document.body.addEventListener('click', function(event){ 2   event.stopPropagation(); 3 }, true);

以上代码中的监听函数由于是捕获型传递时被调用的,所以点击红色区域后,虽然事件源是ID为event_source的元素,但捕获型选传递,从最顶层开始,body结点监听函数先被调用,并且取消了事件进一步向下传递,所以只会出现 current is body .

 

posted @ 2017-10-16 17:10  sky20080101  阅读(70)  评论(0)    收藏  举报