事件

事件捕获：事件从最外层容器，向内传递到目标元素；
事件冒泡：事件从目标元素，向外层传递直到根元素；

事件绑定

1. HTML 中：

<element onclick="handle()">

2. JavaScript 中：

object.onclick = function () {
  // SomeJavaScriptCode
};

3. JavaScript 中：

document.getElementById("button").addEventListener("click", function (event) {
   // SomeJavaScriptCode
  event.stopPropagation();
}, false);
// true - 事件句柄在捕获阶段执行; false- 默认，事件句柄在冒泡阶段执行

需要注意的是，以object.onclick = dealFucntion 这种方式，对同一个目标多次绑定处理函数时，后面的绑定会覆盖前面的绑定；而以 object..addEventListener('click', dealFucntion) 的方式，对同一目标进行多次绑定时，绑定的所有函数都会生效。

移除事件

removeEventListener，移除由 addEventListener() 方法添加的事件。通过 addEventListener() 添加的事件处理程序只能使用removeEventListener() 来移除；移除时传入的参数与添加处理程序时使用的参数相同。通过 addEventListener() 添加的匿名函数无法移除

// 在文档中添加事件句柄
document.addEventListener("mousemove", myFunction);

// 移除文档中的事件句柄
document.removeEventListener("mousemove", myFunction);

阻止事件

event.stopPropagation() 阻止事件的传播，如下，点击 ‘链接’ 时仅打印出 click 链接：

<div id="btn_box">
  <a id="btn" href="XXXX">链接</a>
</div>

<script>
 document.getElementById("btn").addEventListener("click", function (event) {
  console.log('click 链接');
  event.stopPropagation();
}, false);

 document.getElementById("btn_box").addEventListener("click", function (event) {
  console.log('click 外层容器');
}, false);
</script>

event.stopPropagation()，终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

preventDefault() 阻止默认事件，如下，点击 ‘链接’ 时，链接不会被打开，但是会发生冒泡，事件仍会传递到外层的父元素。

<div id="btn_box">
  <a id="btn" href="XXXX">链接</a>
</div>

<script>
 document.getElementById("btn").addEventListener("click", function (event) {
  console.log('click 链接');
  event.preventDefault();
}, false);

 document.getElementById("btn_box").addEventListener("click", function (event) {
  console.log('click 外层容器');
}, false);
</script>

return 语句 同时阻止事件传播和默认事件。

 document.getElementById("btn").addEventListener("click", function (event) {
  console.log('click 链接');
  return false
}, false);

 document.getElementById("btn_box").addEventListener("click", function (event) {
  console.log('click 外层容器');
}, false);