代码改变世界

javascript 事件的一点感悟

2013-08-01 15:05  sql_manage  阅读(257)  评论(0)  编辑  收藏  举报

javascript 冒泡事件的理解一般是这样的：

比方页面上有一个BODY里面包含一个DIV,DIV中包含一个BUTTON。在BODY,DIV,BUTTON中都有一个ONCLICK事件，在BUTTON中又有一个ONCLICK事件。那么我单击BUTTON时会先执行BUTTON中的事件

然后再执行DIV 的事件再执行BODY中的事件.这就是JAVASCRIPT的事件冒泡了。JQUERY好像就只支持这种事件的冒泡。

但如果我想先执行BODY中的单击事件再执行BUTTON中的单击事件，应该怎么办呢？

以下是我的事件监听代码：

 

<html>
   <head>
      <title></title>
   </head>
   
   <body id='bodye'>
   <input type="button" value="test" id="test" />
   </body>
   <script type="text/javascript">
       function bodyEvent(){
          alert('body');
       }
       function buttonEvent(){
           alert('button');
       }
       document.body.onclick=bodyEvent;
       document.getElementById("test").onclick=buttonEvent;
                     //按以上的写法，会先弹出BUTTON,再弹出BODY
                   
    
   </script>
</html>

 

document.body.addEventListener("click", function(){
            alert(this.id);
        }, false);
       document.getElementById("test").addEventListener("click",function(){
            alert(this.id);
       },true);
       document.getElementById("div").addEventListener("click",function(){
            alert(this.id);
       },true);

这里我强行的添加一个事件的监听，注意true与false这个参数，就可以打破原来的事件冒泡流了。TRUE则先执行外层的事件，如果是FALSE则保留原来的
执行方式。