HTML DOM addEventListener() 方法

標籤：

執行個體

為 <button> 元素添加點擊事件。 當使用者點擊按鈕時，在 id="demo" 的 <p> 元素上輸出 "Hello World" :

document.getElementById("myBtn").addEventListener("click", function(){    document.getElementById("demo").innerHTML = "Hello World";});

addEventListener() 方法用於向指定元素添加事件控制代碼。

提示： 使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件控制代碼。

瀏覽器支援

表格中的數字表示支援該方法的第一個瀏覽器的版本號碼。

方法	Chrome	IE	FireFox	Safari	Opera
addEventListener()	1.0	9.0	1.0	1.0	7.0

注意： Internet Explorer 8 及更早IE版本不支援 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支援。 但是，對於這些不支援該函數的瀏覽器，你可以使用 attachEvent() 方法來添加事件控制代碼 (查看 "更多執行個體" 瞭解跨瀏覽器的解決方案)。

文法

element.addEventListener(event, function, useCapture)

參數值

參數	描述
event	必須。字串，指定事件名。 注意: 不要使用 "on" 首碼。 例如，使用 "click" ,而不是使用 "onclick"。  提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。
function	必須。指定要事件觸發時執行的函數。  當事件對象會作為第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(滑鼠事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值: true - 事件控制代碼在捕獲階段執行 false- false- 預設。事件控制代碼在冒泡階段執行

技術細節

DOM 版本:	DOM Level 2 Events
傳回值:	沒有傳回值
記錄:	在 Firefox 6 和 Opera 11.60 中 useCapture 參數是可選的。 （在 Chrome、IE 和 Safari 中一直都是可選的）。

更多執行個體執行個體

您可以通過函數名來引用外部函數。

該執行個體示範了在使用者點擊 <button> 元素時如何執行函數:

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

 

轉：http://www.runoob.com/jsref/met-element-addeventlistener.html

HTML DOM addEventListener() 方法