addEventListener(）方法，事件监听

addEventListener() 方法，事件监听
removeEventListener()，移除事件的监听

语法

addEventListener()

element.addEventListener(event, function, useCapture);

• 第一个参数是事件的类型 (如 “click” 或 “mousedown”).
• 第二个参数是事件触发后调用的函数。
• 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
  将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素
  冒泡：false（默认）
  内部元素的事件会先被触发，然后再触发外部元素（<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件）
  捕获：true
  外部元素的事件会先被触发，然后才会触发内部元素的事件（<div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件）

element.addEventListener("click", function(){ alert("Hello World!"); });
// ————————————————————————————————————
element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
// ————————————————————————————————————
// 传递参数
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

// ————————————————————————————————————
// 浏览器兼容性处理
// 可以使用 detachEvent() 方法来移除事件句柄
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

---

removeEventListener()

element.removeEventListener("mousemove", myFunction);