javascript_事件&冒泡

来源：互联网发布：淘宝飞猪怎么开店编辑：程序博客网时间：2024/06/06 18:37

javascript的事件在两个阶段执行：捕获和冒泡。一旦元素触发事件，那么允许处理事件的元素和顺序都大有不同。图1演示了在页面上用户点击标签<a>是的执行顺序。

图1

例1演示了当鼠标放到标签li上时候有背景色而离开后变白

例1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title></title>
   <script type="text/javascript">
       window.onload = function(){
           var lis = document.getElementsByTagName("li");
           for(var i = 0;i<lis.length;i++){
               lis[i].onmouseover = function(){
                   this.style.backgroundColor = "blue";
               }
               lis[i].onmouseout = function() {
                   this.style.backgroundColor = "white";
               }
           }
       }
   </script>
</head>
<body>
   <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
   </ul>
</body>

</html>

在这个例子中可以看到程序很好的工作了，但你没有没考虑当把鼠标放到标签<a>上时<li>也达到了效果。这就是冒泡，当鼠标放到标签<a>上，标签<a>并没有注册事件，按照图1，他会冒泡到标签<li>上处理<li>上的事件所以<li>还是会在变色也不变之间切换。看完这个例子是不是觉得javascript很强大。

但是在我们不需要冒泡的时候我们能阻止他吗？我们先来看一个不需要冒泡的例子

例2：

例2我想对所有的标签，当鼠标移动上去的时候让它有个边框，当鼠标移走的时候停止显示边框，于是我很快的做出了相应的程序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title></title>
   <script type="text/javascript">
       window.onload = function(){
           var all = document.getElementsByTagName("*");
           for(var i = 0;i < all.length;i++){
               all[i].onmouseover = function(e){
                   this.style.border = "1px solid red";
               }
               all[i].onmouseout = function(e){
                   this.style.border = "0px";
               }
           }
       }
   </script>
</head>
<body>
   <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
   </ul>
</body>
</html>

效果如图

显然不对。结合前面所介绍的冒泡相信大家很容易发现问题的所在。没错在我鼠标放到<a>标签上的时候<a>有处理了onmouseover事件,由于冒泡<li><ul>...都处理了绑定的鼠标事件。很纠结。

解决办法：

在解决中我们还要注意IE于W3C标准有不同

IE是在window.event下注册了cancelBubble属性，设置为true会阻止冒泡。

W3C标准是设定了stopPropagation()函数来阻止冒泡。

我们来看解决程序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title></title>
   <script type="text/javascript">
       window.onload = function(){
           var all = document.getElementsByTagName("*");
           for(var i = 0;i < all.length;i++){
               all[i].onmouseover = function(e){
                   this.style.border = "1px solid red";
                   stopBubble(e);
               }
               all[i].onmouseout = function(e){
                   this.style.border = "0px";
                   stopBubble(e);
               }
           }
       }
       function stopBubble(e){
           if(e && e.stopPropagation){
               e.stopPropagation();
           } else{
               window.event.cancelBubble = true;
           }
       }
   </script>
</head>
<body>
   <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
   </ul>
</body>
</html>

红色部分是阻止冒泡函数。