事件冒泡 事件捕获

捕获=>目标=>冒泡

捕获是从外向内捕获；冒泡是从内向外冒泡；

事件冒泡：从内到外，假如我要点击的是div，点击后会一层一层的往上。

案例：

<div class="classv">
  祖宗
  <div class="actva">我是老爸
    <div class="foo">我是孩子</div>
   </div>
</div>
<script type="text/javascript">
  var a = document.querySelector('.classv').addEventListener('click', function() {
     console.log('我是祖宗')
  }, false)
  var b = document.querySelector('.actva').addEventListener('click', function() {
     console.log('我是老爸')
  }, false)
  var c = document.querySelector('.foo').addEventListener('click', function() {
     console.log('我是孩子')
  }, false)
</script>

注意： addEventListener中有三个属性，第三个属性是布尔值（默认false为冒泡事件。true为事件捕获）。

 

事件捕获：

从外到内：

<div class="classv">
  祖宗
  <div class="actva">我是老爸
    <div class="foo">我是孩子</div>
   </div>
</div>
<script type="text/javascript">
  var a = document.querySelector('.classv').addEventListener('click', function() {
     console.log('我是祖宗')
  }, true)
  var b = document.querySelector('.actva').addEventListener('click', function() {
     console.log('我是老爸')
  }, true)
  var c = document.querySelector('.foo').addEventListener('click', function() {
     console.log('我是孩子')
  }, true)
</script>

这个案例与前面的是相同，只是把addEventListener的第三属性改成true。

注意：addEventListener()必须用removeEventListener()解除