javascript 事件的一点感悟

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_30617797

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/msql/p/3230065.html

本文深入解析JavaScript事件冒泡机制，并提供一种方法来改变事件执行顺序，即先执行外层元素事件，再执行内层元素事件。

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);