JavaScript HTML DOM EventListener(9/3)

监听事件

浏览器会根据某些操作触发对应事件，如果我们需要针对某种事件进行处理，则需要监听这个事件。监听事件的方法主要有以下几种：

1. HTML 内联属性（避免使用）

点击这个按钮

onclick 属性表示触发 click，属性值的内容（JavaScript 代码）会在单击该 HTML 节点时执行.

这种方法，JavaScript 代码与 HTML 代码耦合在了一起，不便于维护和开发

2. DOM 属性绑定

element.onclick = function(event){
    alert('你点击了这个按钮');
};

上面代码就是监听 element 节点的 click 事件.
简单易懂，而且有较好的兼容性
但因为直接赋值给对应属性，如果你在后面代码中再次为 element 绑定一个回调函数，会覆盖掉之前回调函数的内容.

3. 使用事件监听函数
   语法:

element.addEventListener(, , );

在 element 这个对象上面添加一个事件监听器，当监听到有 事件发生的时候，调用 这个回调函数。至于 这个参数，表示该事件监听是在“捕获”阶段中监听（设置为 true）还是在“冒泡”阶段中监听（设置为 false), 默认值为false.

var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', function() {
    alert('你点击了这个按钮');
}, false);

移除事件监听

当我们为某个元素绑定了一个事件，每次触发这个事件的时候，都会执行事件绑定的回调函数。如果我们想解除绑定，需要使用 removeEventListener 方法：

element.removeEventListener(, , );

需要注意的是，绑定事件时的回调函数不能是匿名函数，必须是一个声明的函数，因为解除事件绑定时需要传递这个回调函数的引用，才可以断开绑定。例如：

点击这里

时间触发过程

• 捕获阶段（Capture Phase）
  当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。
  监听某个在捕获阶段触发的事件，需要在事件监听函数传递第三个参数 true:

element.addEventListener(, , true);

捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。

• 目标阶段（Target Phase）
  当事件跑到了事件触发目标节点那里，最终在目标节点上触发这个事件，就是目标阶段。
  需要注意的时，事件触发的目标总是最底层的节点。比如你点击一段文字，你以为你的事件目标节点在 div 上，但实际上触发在

  、 等子节点上。例如：

    
这是一段话，这里有个加粗字体。

以上监听单击事件，将目标节点的 tag name 弹出。当你点击加粗字体时，事件的目标节点就为最底层的 节点

• 冒泡阶段（Bubbling Phase）
  在实际使用中，并不需要把事件监听函数准确绑定到最底层的节点也可以正常工作。比如在上例，为这个
  绑定单击时的回调函数，无须为这个

  下面的所有子节点全部绑定单击事件，只需要为

  这一个节点绑定即可。因为发生它子节点的单击事件，都会冒泡上去，发生在

  上面
  demo

为什么不用第三个参数 true

这是因为 IE 浏览器不支持在捕获阶段监听事件，为了统一而设置的，毕竟 IE 浏览器的份额是不可忽略的。

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。
点我

实例使用 addEventListener() 方法在同一个按钮中添加多个事件。
点我

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象

实例在 window 对象中使用 addEventListener() 方法。
尝试重置浏览器的窗口触发 "resize" 事件句柄。