HTML DOM addEventListener() 方法

//爲 <button> 元素添加點擊事件。 當用戶點擊按鈕時，在 id="demo" 的 <p> 元素上輸出 "Hello World" :
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

　　該實例演示了在用戶點擊 <button> 元素時如何執行函數:

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

　　

您能夠在文檔中添加許多事件，添加的事件不會覆蓋已存在的事件。

該實例演示瞭如何在<button>元素中添加兩個點擊事件：

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

　　

您能夠在同一個元素中添加不一樣類型的事件。

該實例演示瞭如何在同一個 <button> 元素中添加多個事件：

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

　　當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

　　修改 <button> 元素的背景：

document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});

　　使用可選參數 useCapture 來演示冒泡和捕獲階段的不一樣:

document.getElementById("myDiv").addEventListener("click", myFunction, true);

　　使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

// 添加 <div> 事件句柄 
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 事件句柄 
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

　　

若是瀏覽器不支持 addEventListener() 方法, 你能夠使用 attachEvent() 方法替代。

如下實例演示了跨瀏覽器的解決方法：

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