jQuery三层次结构的事件委托，为什么最内层的委托中中调用stopPropagation，会阻止中间层的事件触发？

Question

问题描述：

html

<div id="parent">parent
  <div id="child1">child1
    <div id="child2">child2</div>
  </div>
</div>

js

$("#parent").on("click", "#child1", function(){
  console.log("child1");
});

$("#parent").on("click", "#child2", function(){
  console.log("child2");
})

这样的话，点击child2，会先打印child2，然后再打印child1

我认为过程是点击child2，然后冒泡到parent的时候触发click事件，因为parent被委托了两个click事件，所以打印了child1、child2
问题一：为什么会先打印child2，再打印child1？

当在child2的委托中调用stopPropagation

$("#parent").on("click", "#child1", function(){
  console.log("child1");
});

$("#parent").on("click", "#child2", function(event){
  event.stopPropagation();
  console.log("child2");
})

此时点击child2，只会打印child2。点击child1，打印child1。
问题二：请问这是怎么回事？child2的委托中调用的stopPropagation，不应该是阻止parent继续往上冒泡么？

Answer 1

1. 点击child2,当然首先触发绑定在child2的事件，打印child2，再冒泡到父元素child1上，打印child1
2. child2是一个单独的dom元素，阻止冒泡当然是阻止它本身往上继续冒泡
3. on方法，你写了子元素选择器，所以事件是绑定在子元素上，和parent无关。建议再看看on方法

Answer 2

首先question 1:
当一个事件在某个dom节点上被触发时, 事件会随着所继承的继承树上的各个父节点不断向上传递, 一直穿过整个dom结构, 到达根节点. 在传递的过程中, 如果沿途节点有相同的事件,一并触发.
这就叫做事件冒泡, 同时也是js默认的事件传播方式.

然后question 2:
调用stopPropagation的是event对象, 事件源是child2, 所以点击child2, 他的父节点child1以及再上层的节点的事件就不触发了. 阻止冒泡, 阻止的就是这个事件的向上传递.