HTML DOM 快速導覽 - 元素物件 element 的方法 addEventLisener()

element.addEventLisener() 替元素 (element) 物件 (object) 增加事件 (event) 的傾聽者,使用者對該元素進行相關動作之時,便會觸發事件。



addEventLisener() 需要三個參數
element.addEventLisener(type, listener, useCapture);


type 為事件的型態, listener 發生事件後相對應處理的函數 (function) , useCapture 為選擇性的布林參數 (parameter) ,一般直接用 false 帶入。


舉例如下
function run() {
    var demo = document.getElementById("demo");
    demo.addEventListener("click", modifyText, false);
}

function modifyText() {
    var demo = document.getElementById("demo");
    demo.innerHTML = "Choice. The problem is choice.";
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:document049.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 */


此例的 run() 函數替 id 屬性 (attribute) 為 demo 的元素增加 click 的事件處理
demo.addEventListener("click", modifyText, false);


也就是說,只要點擊 demo 元素區域,就會執行另一個 modifyText() 函數
function modifyText() {
    var demo = document.getElementById("demo");
    demo.innerHTML = "Choice. The problem is choice.";
}


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="document049.js" type="text/javascript"></script> 
</head>
<body onload="run();">
<div id="demo">There is no spoon.</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:document049.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟,網頁內容為 There is no spoon.



點擊該文字區域,網頁內容就改變成 Choice. The problem is choice.



中英文術語對照
元素element
物件object
事件event
函數function
屬性attribute
瀏覽器broswer


您可以繼續參考
元素物件 element


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/element.addEventListener
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener
http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener

沒有留言: