<script> var click = document.getElementById('inner'); var clickouter = document.getElementById('outer'); click.addEventListener('click',function(){ alert('capture show'); },true); click.addEventListener('click',function(){ alert('bubble show'); },false); </script>
这种情况下首先这些的是capture show，其次是bubble show。但是这种结果是与注册的顺序有关系的，先注册就先执行。因为我们在看事件捕获和事件冒泡示意图，发现最后具体的dom对象是只有一个的。
那么 如果我们给outer和inner都注册了click事件但是我不希望outer执行怎么办呢？这个时候我们就需要用到stopPropagation函数了，这个函数是用来阻止冒泡，言下之意是让事件不再继续冒泡下去，这样接下来注册同样类型事件的dom对象就不会执行了。
比如在自制下拉框的时候，我们点击浏览器的其他位置，我们需要下拉框的options隐藏，这时我们就要用到stopPropagation了。如下：
<script> var click = document.getElementById('inner'); var clickouter = document.getElementById('outer'); click.addEventListener('click',function(event){ alert('inner show'); event.stopPropagation(); },false); clickouter.addEventListener('click',function(){ alert('outer show'); },false); </script>
正常的情况下，我们在不添加stopPropagation函数时，首先应该执行inner，然后执行outer，但是当我们在inner的事件函数中添加了stopPropagation函数之后，执行完inner的事件函数之后，就不会在执行outer的事件函数了，也可以理解为事件冒泡到inner之后就消失了，因此也就不会在执行接下来的事件函数了。
由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。
好了以上就是全部内容啦 ，希望对大家的学习有所帮助~~
您可能感兴趣的文章: