JS事件捕获和冒泡

现有父元素一个，子元素一个，分别都绑定了各自的点击事件

	par.onclick = () => console.log(1);
    child.onclick = () => console.log(2);

点击子元素后，控制台输出

2
1

即默认情况下，先触发子元素的绑定事件，然后再逐级去触发父级的绑定事件，这个过程就叫冒泡。

现在换另外一种点击事件绑定

  par.addEventListener('click', e => console.log(1),true)
  child.addEventListener('click', e => console.log(2),false)

addEventListener的第三个参数，true事件在捕获过程执行，false事件在冒泡过程中执行，执行上面的代码，控制台输出

1
2

跟上面的输出反过来了，先执行的父级的绑定事件，然后逐渐降级去触发子级的事件，这个过程叫捕获。

阻止事件传播

event.stopPropagation()在开发中经常用到，大多数是在冒泡过程，所以错以为它是阻止冒泡的事件，其实它也可以来阻止捕获

  par.addEventListener('click', e => {
    e.stopPropagation();
    console.log(1);
  },true)
  child.addEventListener('click', e => {
    console.log(2);
  },false)

执行上面的代码，控制台输出

1

e.stopPropagation()阻止了事件的传播，仅触发了父元素的点击事件