JavaScript對HTML DOM使用EventListener進行操作_基礎知識-js教程-PHP中文網

首頁

web前端

js教程

JavaScript對HTML DOM使用EventListener進行操作_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:35 PM

dom javascript

addEventListener() 方法
實例
點用戶點擊按鈕時觸發監聽事件：

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

登入後複製

addEventListener() 方法用於向指定元素新增事件句柄。
addEventListener() 方法新增的事件句柄不會覆寫已存在的事件句柄。
你可以為一個元素添加多個事件句柄。
你可以為同一個元素加入多個同類型的事件句柄，如：兩個 "click" 事件。
你可以為任何 DOM 物件新增事件監聽，而不僅僅是 HTML 元素。如： window 物件。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法, JavaScript 從 HTML 標記中分離開來，可讀性更強，在沒有控制HTML標記時也可以加入事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。
語法

element.addEventListener(event, function, useCapture);

登入後複製

第一個參數是事件的型別 (如 "click" 或 "mousedown").
第二個參數是事件觸發後呼叫的函數。
第三個參數是個布林值用來描述事件是冒泡還是捕獲。此參數是可選的。
Note 注意:不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。

為原元素加入事件句柄
實例
當使用者點擊元素時彈出 "Hello World!" :

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

登入後複製

你可以使用函數名，來引用外部函數:
實例
當使用者點擊元素時彈出 "Hello World!" :

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

登入後複製

在同一個元素中加入多個事件句柄
addEventListener() 方法允許在同一個元素中新增多個事件，且不會覆寫已存在的事件：
實例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

登入後複製

你可以為同個元素加入不同類型的事件：
實例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

登入後複製

向 Window 物件新增事件句柄
addEventListener() 方法可讓你在 HTML DOM 物件新增事件監聽， HTML DOM 物件如： HTML 元素, HTML 文件, window 物件。或其他支出的事件物件如: xmlHttpRequest 物件。
實例
當使用者重置視窗大小時加入事件監聽：

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

登入後複製

傳遞參數
當傳遞參數值時，使用"匿名函數"呼叫帶參數的函數：
實例

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

登入後複製

事件冒泡或事件捕捉？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。如果你將

元素插入

元素中，使用者點擊

元素, 哪個元素的 "click" 事件先被觸發呢？
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即：

元素的點擊事件先觸發，然後會觸發

元素的點擊事件。
在擷取中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即：

元素的點擊事件先觸發，然後再觸發

元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設定傳遞類型：

addEventListener(event, function, useCapture);

登入後複製

預設值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。
實例
document.getElementById("myDiv").addEventListener("click", myFunction, true);

試試看 »

removeEventListener() 方法
removeEventListener() 方法移除 addEventListener() 方法新增的事件句柄:
實例

element.removeEventListener("mousemove", myFunction);

登入後複製

瀏覽器支援
表格中的數字表示支援該方法的第一個瀏覽器的版本號碼。
JavaScript對HTML DOM使用EventListener進行操作_基礎知識
注意： 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);

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

See all articles

JavaScript對HTML DOM使用EventListener進行操作_基礎知識

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題