一篇文章帶你了解JavaScript 事件監(jiān)聽
回復“前端”即可獲贈前端相關學習資料
大家好，我是前端進階者。JavaScript事件處理程序的最新功能是事件監(jiān)聽。事件監(jiān)聽監(jiān)視元素上的事件。
一、addEventListener()方法
addEventListener()方法將事件處理程序附加到指定的元素。
可以重寫隨機顏色，如下所示：
例：
<html><title>項目(nhooo.com)</title><body style="background-color: aqua;"><p>單擊下面的按鈕以更改文檔的背景顏色：</p><button>點我改變背景顏色</button><script>let btn = document.querySelector("button");btn.addEventListener("click", bgChange);function bgChange() {let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";document.body.style.backgroundColor = color;}function random(number) {return Math.floor(Math.random() * (number + 1));}</script></body></html>
將addEventListener()方法附加到按鈕上。addEventListener()接受兩個必填參數(shù)-要監(jiān)聽的事件和監(jiān)聽器回調(diào)函數(shù)。
1. 語法
element.addEventListener(event, listener, useCapture)代碼解析：
第一個參數(shù)是事件的類型（例如“ click”或“ mousemove”）。
第二個參數(shù)是事件發(fā)生時我們要調(diào)用的監(jiān)聽函數(shù)。
第三個參數(shù)是一個布爾值，指定是使用事件捕獲。此參數(shù)是可選的。
注意：
不要為事件使用“ on”前綴。使用“ click”代替“ onclick”。
2. 將事件監(jiān)聽添加到元素
將所有代碼放入addEventListener()方法中的匿名函數(shù)中是非常合適的，如下所示：
<script>let para = document.querySelector("#para");para.addEventListener("click", function() {this.innerHTML = "Hello world";});</script>
還可以引用外部“命名”函數(shù)：
示例
<script>let para = document.querySelector("#para");para.addEventListener("click", changeText);function changeText() {para.innerHTML = "Hello world";}</script>
3. 將多個事件監(jiān)聽添加到同一元素
事件監(jiān)聽似乎與事件處理程序?qū)傩苑浅Ｏ嗨?，但是它們有一些?yōu)點。我們可以在同一元素上設置多個事件監(jiān)聽，如以下示例所示：
<script>document.querySelector("button").addEventListener("click", myFunc);document.querySelector("button").addEventListener("click", anotherFunc);function myFunc() {document.body.style.backgroundColor = "coral"; //改變背景顏色}function anotherFunc() {document.body.style.fontSize = "2rem"; //改變字體大小}</script>
可以向元素添加不同類型的事件：
示例
4. 傳遞參數(shù)
傳遞參數(shù)值時，請使用匿名函數(shù)，該函數(shù)使用參數(shù)調(diào)用指定的函數(shù)：
例
var btn = document.querySelector("button");btn.addEventListener("click", function() {myFunc(x, y);});
5. 將事件監(jiān)聽添加到Window對象
此外，可以addEventListener()在文檔和窗口對象上使用。
本示例使用以下addEventListener()方法將click事件附加到文檔：
document.addEventListener("click", function() {alert("Hello World!!!");});
使用該addEventListener()方法將調(diào)整大小(resize)事件附加到窗口：
window.addEventListener("resize", function() {box.innerHTML = Math.random();});
當前，事件監(jiān)聽是處理JavaScript中事件的最常見和首選方式。
二、removeEventListener()方法
可以使用該removeEventListener()方法從元素中刪除一個或所有事件。
語法：
var box = document.getElementById("para");// Attach an event handler to a P element with id="para"box.addEventListener("mousemove", myFunc);// Remove the event handler from a P element with id="para"box.removeEventListener("mousemove", myFunc);
案例：
<script>// 使用以下代碼將事件處理程序附加到 id="para"var box = document.getElementById("para");box.addEventListener("mousemove", myFunc);function myFunc() {box.innerHTML = Math.random();}function removeHandler() {//從id="para"的P元素中刪除事件處理程序box.removeEventListener("mousemove", myFunc);}</script>
第一個參數(shù)是事件的類型（例如“ click”或“ mousemove”）。
第二個參數(shù)是事件發(fā)生時我們要調(diào)用的函數(shù)。
三、總結(jié)
本文基于JavaScript基礎，介紹了如何進行JavaScript事件監(jiān)聽 ，從最基本的語法開始，如何將事件監(jiān)聽添加到元素，如何進行參數(shù)傳遞，如何添加到Window對象等等，都做了詳細的講解。通過用豐富的案例幫助大家更好理解。
我是前端進階者。使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學習群請在后臺回復【入群】
萬水千山總是情，點個【在看】行不行