事件捕获/事件冒泡（望远镜第13章好好看一看）

• 首先，如果一个dom元素中，既有冒泡（目标元素 -> 父元素 -> body -> html -> document -> window），又有捕获，W3C规定了任何发生在W3C事件模型中的事件，首先是进入捕获阶段，直接达到目标元素，再进入冒泡阶段。
• 回顾一下target.addEventListener(event,function,useCapture)
  event（必须）指定事件名（注意不要使用”on”前缀，例如使用”click”而不是使用”onclick”）
  function（必须）指定要事件触发时执行的函数
  useCapture（可选）布尔值，指定事件是否在捕获或冒泡阶段执行（如果值为false，在冒泡阶段执行；如果值为true，在捕获阶段执行）默认值为false
  例子：

<div id="div1">
我是div1
<div id="div2">
我是div2
<div id="div3">
我是div3
<div id="div4">
我是div4
div>div>div>div>

div1.addEventListener("click",function(){
     
alert("div1");
},false);
div2.addEventListener("click",function(){
     
alert("div2");
},true);
div3.addEventListener("click",function(){
     
alert("div3");
},false);
div4.addEventListener("click",function(){
     
alert("div4");
},true);

• 如果点击div4，弹出的顺序是2 -> 4 -> 3 -> 1。（先执行捕获，捕获的顺序是从大到小，因此先弹出div2再div4；然后执行冒泡，冒泡的顺序是从小到大，因此先弹出div3再div1） 如果点击div2，弹出的顺序是2 -> 3 -> 1。

• 注意：绑定在被点击元素的事件是按照代码的顺序发生的，其他非绑定的元素则是通过冒泡或者捕获触发。根据W3C的标准，先发生捕获，后发生冒泡。因此事件的整体顺序是：非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡。

• 补充：移除一个事件所用的api为removeEventListener；通过addEventListener形式的绑定事件不会相互抵消，从而实现一个按钮控制多个事件。