浏览器事件的相关概念

浏览器事件传播的三个阶段：1.捕获阶段 2.目标对象阶段 3.冒泡阶段

其中各个阶段所对应的的内容为：

1. 捕获（Capture）阶段： 事件对象（event object）从window派发到目标对象父级的过程
2. 目标（Target）阶段： 事件对象 派发到目标元素时的阶段，如果事件类型指示其不冒泡，那么事件传播将在此阶段终止
3. 冒泡（Bubbling）阶段： 与 捕获阶段相反，是以目标对象父级到window的过程

在任一阶段调用stopPropagation（）都将终止本次事件的传播

有三种方法可以绑定事件： 1.行内绑定 2.直接赋值 3.使用addEventListener

1. 内联：

   HTML： 
   <button onclick="handleClick()">Press me</button>
   script ： function handleClick() {
    console.log('button clicked')
   }

2. 直接赋值：

   var btn = document.querySelector('button');
   btn.onclick = function() { 
    console.log('button clicked')
   }

3. 通过addEventListener

   target.addEventListener(type, listener[, options]);
   target.addEventListener(type, listener[, useCapture]);

在是实际的JavaScript代码中通常采用 事件对象（Event Object） 来对事件进行处理。

function handleClick(e) {
    console.log(e);
} 
btn.addEventListener('click', handleClick);
//其中e就是时间对象，即eventobject

通常情况下，事件默认绑定到 冒泡阶段，但如果显式地令 useCapture 为 true，则会像相应的事件绑定到 捕获阶段