JavaScript 事件监听

事件冒泡、事件捕获

事件传递有两种方式：冒泡与捕获。
冒泡：内部元素的事件会先被触发，然后再触发外部元素
捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件

阻止冒泡方式

1. 通过event.target 即真正触发事件的元素 例如：

if(event.target==this){
  doSomething();
}

2. 直接返回扔掉：在代码执行结束后添加 return false
3. 使用 event.stopPropagation()：在代码执行结束后添加event.stopPropagation()

方法

addEventListener

element.addEventListener(event, function, useCapture);
document.getElementById("myBtn").addEventListener("click", displayDate);

• event：事件的类型 (如 “click” 或 “mousedown”).
• function：事件触发后调用的函数。
• useCapture：可选，布尔值，用于描述事件是冒泡还是捕获。
• 用于向指定元素添加事件句柄。
• 添加的事件句柄不会覆盖已存在的事件句柄。
• 可以向一个元素添加多个事件句柄。
• 可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
• 可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
• 可以更简单的控制事件（冒泡与捕获）。
• 可以使用 removeEventListener() 方法来移除事件的监听。

element.addEventListener("click", function(){ alert("Hello World!"); });
//引用外部函数
element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

// 不会覆盖
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
element.addEventListener("click", myFourthFunction);

// 向 Window 对象添加事件句柄，当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

element.addEventListener("click", function(){ myFunction(p1, p2); });

removeEventListener

_element_.removeEventListener("mousemove", myFunction);
移除由 addEventListener() 方法添加的事件句柄

浏览器支持

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}