stopPropagation与preventDefault，事

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

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

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

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <button id="button1" onclick="test('button1')">点击按钮</button>
    </div>
  </div>
</div>
<!--onclick直接添加的是冒泡阶段的触发事件-->
<script>
function test(value) {
  console.log(value)  
}
//点击按钮，控制台会依次输出值 button1，div3，div2，div1
</script>

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

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <button id="button1" onclick="test('button1')">点击按钮</button>
    </div>
  </div>
</div>

<script>
function myListener(id) {
  //onclick直接添加的是冒泡阶段的触发事件,这里使用addEventListener方法添加捕获阶段的触发事件
  document.getElementById(id).addEventListener("click",function(event) {
    console.log('b-' + id)
  },true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("button1");
function test(value) {
  console.log(value)  
}
//点击按钮，控制台会依次输出值 b-div1，b-div2，b-div3，b-button1，button1，div3，div2，div1
</script>

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

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

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
    </div>
  </div>
</div>

<script>
function myListener(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    console.log('b-' + id)
  },true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("checkbox1");
function test(value) {
  //当在冒泡阶段进行到div3上阻止冒泡，事件不会冒泡传递至上一层div2
  if(value == 'div3') {
     window.event.stopPropagation()
  }
  console.log(value)  
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b-div1，b-div2，b-div3，b-checkbox1，checkbox1，div3
</script>

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
    </div>
  </div>
</div>

<script>
function myListener(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    //在添加div2的捕获阶段事件时进行阻止，事件不会进行捕获传递到下一层div3
    if(id == 'div2') {
      event.stopPropagation();
    }
    console.log('b-' + id)
  },true)
}
myListener("div1");
myListener("div2");  
myListener("div3");
myListener("checkbox1");
function test(value) {
  console.log(value)  
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b-div1，b-div2
</script>

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
    </div>
  </div>
</div>

<script>
function myListener(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    //preventDefault在冒泡阶段或者捕获阶段加都是一样的效果，如果该事件可取消，阻止当前事件，但不影响冒泡/捕获
    //if(id == 'checkbox1') {
      //event.preventDefault();
    //}
    console.log('b-' + id)
  },true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("checkbox1");
function test(value) {
  //preventDefault在冒泡阶段或者捕获阶段加都是一样的效果，如果该事件可取消，阻止当前事件，但不影响冒泡/捕获
  if(value == 'checkbox1') {
    window.event.preventDefault();
  }
  console.log(value)  
}
//点击勾选框，勾选框不会被选中，但控制台会依次输出值 b-div1，b-div2，b-div3，b-checkbox1，checkbox1，div3，div2，div1
</script>

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

<div id="div1" onclick="test('div1')">
  <div id="div2" onclick="test('div2')">
    <div id="div3" onclick="test('div3')">
      <input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
    </div>
  </div>
</div>

<script>
function myListener1(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    console.log('b1-' + id)
  },true)
}
function myListener2(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    if(id == 'div2') {
      event.stopImmediatePropagation();
      //如果这里将stopImmediatePropagation换成stopPropagation，输出结果将会改变哦，可以自己试一试感受一下二者的区别
      //event.stopPropagation();
    }
    console.log('b2-' + id)
  },true)
}
function myListener3(id) {
  document.getElementById(id).addEventListener("click",function(event) {
    console.log('b3-' + id)
  },true)
}
myListener1("div1");
myListener2("div1");  
myListener3("div1");
myListener1("div2");
myListener2("div2");//到这里的时候stopImmediatePropagation阻止了捕获过程，同时阻止了div2上的后面的myListener3("div2")绑定的方法
myListener3("div2");
myListener1("div3");
myListener2("div3");
myListener3("div3");
myListener1("checkbox1");
myListener2("checkbox1");
myListener3("checkbox1");
function test(value) {
  console.log(value)  
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b1-div1，b2-div1，b3-div1，b1-div2，b2-div2
</script>