JS事件冒泡、停止冒泡、addEventListener--实例演示

浏览数：53 / 时间：2015年06月09日

问题：

 <div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)">
    <div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);">
      <div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)">
         core!!!!!
      </div>
    </div>
  </div>

1.上面div中，如果单击core，会执行多少个alert？先后顺序是上面？

冒泡就是处理DOM节点树中，各个节点绑定事件执行流程的一种方式；

因为各浏览器软件和相关组织间的差异，事件流有三种：事件冒泡、事件捕获、DOM事件流，其中DOM事件流已被所有主要浏览器实现；

2.chorme用的是冒泡事件流方式，这个例子解释了冒泡事件流的事件执行顺序；

3. stopPropagation()是停止冒泡事件流。如果你在node A节点添加该方法，那么“泡泡“就在node A这个位置破了，其后的所有节点绑定事件都不执行；

3.同时使用了addEventListener，向某节点添加事件；

4.下面是代码，保存成html文件，看看效果；

<html>
<head>
  <style type="text/css">
     .item{
         display: table;
         margin: 100px;
     }
     #outer{
         width:400px;
         height:400px;
         background-color: blue;         
     } 
     #inner{
         vertical-align: middle;
         width:200px;
         height:200px;
         background-color: white;         
     }
     #core{
         width:80px;
         height:80px;
         background-color: red;
         text-indent: 10px;
         line-height: 50px;         
     }
  </style>

  
</head>
<body>
  <div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)">
    <div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);stopbubble(arguments[0])">
      <div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)">
         core!!!!!
      </div>
    </div>
  </div>
</body>

<!--you must write <script> under <body>-->
<script type=‘text/javascript‘>  
        var core = document.getElementById(‘core‘);
        core.addEventListener("click",function(){alert(‘dddddd‘)},false);
        //addEventListener: can add one more event to node "core"     
        function stopbubble(e){
              e.stopPropagation();//stop bubble event on this node 
        }
</script>
</html>