溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript中的事件監(jiān)聽是什么”，在日常操作中，相信很多人在JavaScript中的事件監(jiān)聽是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中的事件監(jiān)聽是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
addEventListener()方法將事件處理程序附加到指定的元素。
可以重寫隨機顏色，如下所示：
例：
<!DOCTYPE html> <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ù)。
element.addEventListener(event, listener, useCapture)
代碼解析：
第一個參數(shù)是事件的類型(例如“ click”或“ mousemove”)。
第二個參數(shù)是事件發(fā)生時我們要調(diào)用的監(jiān)聽函數(shù)。
第三個參數(shù)是一個布爾值，指定是使用事件捕獲。此參數(shù)是可選的。
注意：
不要為事件使用“ on”前綴。使用“ click”代替“ onclick”。
將所有代碼放入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>
事件監(jiān)聽似乎與事件處理程序?qū)傩苑浅Ｏ嗨疲撬鼈冇幸恍﹥?yōu)點。我們可以在同一元素上設(shè)置多個事件監(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>
可以向元素添加不同類型的事件：
示例
傳遞參數(shù)值時，請使用匿名函數(shù)，該函數(shù)使用參數(shù)調(diào)用指定的函數(shù)：
例
var btn = document.querySelector("button"); btn.addEventListener("click", function() { myFunc(x, y); });
此外，可以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()方法從元素中刪除一個或所有事件。
語法：
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ù)。
到此，關(guān)于“JavaScript中的事件監(jiān)聽是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼