stopPropagation与preventDefault，事件冒泡与事件捕获那点事儿

首先了解一下事件冒泡与事件捕获

事件冒泡：即事件会从最内层的元素开始发生，一直向上传播，直到document对象，最终可以冒泡到window上。
事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

image.png

从上图可以看出事件是先进行捕获然后再进行冒泡过程

具体咱们写段代码演示一下：

  

    

      点击按钮
    
  

点击按钮，则会触发一个click点击事件，由于按钮上绑定了test()方法并传递了参数，
所以这时候控制台会输出值 button1，但此时点击事件并没有结束，因为父节点的存在，点击事件还要进行冒泡，冒泡至上一层，即div3上面，同时div3上也绑定了test()方法并传递了参数，所以这时候控制台会输出值 div3，同理进行下一轮冒泡，直至冒泡至根节点，所以会输出值 button1，div3，div2，div1
下面我们改进一下代码，加上捕获阶段的事件

关于添加事件可以参考我的另一篇文章 addEventListener与removeEventListener

  

    

      点击按钮
    
  

综上可以看出事件总是会先捕获，再冒泡
不管有没有绑定方法，事件的捕获与冒泡总是会发生的

然后我们来了解一下怎么阻止当前事件或者阻止冒泡/捕获事件
event.stopPropagation 阻止捕获和冒泡阶段中当前事件的进一步传播
event.preventDefault 阻止当前事件（如果该事件可取消），但事件冒泡/捕获仍会发生

接下来我们来试一试这两个方法

  

    

      点击勾选框
    
  

然后试试在时间捕获阶段阻止捕获

  

    

      点击勾选框
    
  

当我们既不想阻止冒泡，也不想阻止捕获，但不想让它选中，这时就可以用上preventDefault了

  

    

      点击勾选框
    
  

附加一个用的比较少的的方法event.stopImmediatePropagation
它也可以阻止事件捕获或者事件冒泡，用法参考stopPropagation
但它与stopPropagation不同的是，stopPropagation只会阻止冒泡或者是捕获。 但是stopImmediatePropagation除此之外还会阻止该元素的其它事件发生，stopPropagation不会阻止其它事件的发生。

  

    

      点击勾选框