一篇文章帶你了解JavaScript 事件監(jiān)聽(tīng)
大家好，我是前端進(jìn)階者。JavaScript事件處理程序的最新功能是事件監(jiān)聽(tīng)。事件監(jiān)聽(tīng)監(jiān)視元素上的事件。
一、addEventListener()方法
addEventListener()方法將事件處理程序附加到指定的元素。
可以重寫(xiě)隨機(jī)顏色，如下所示：
例：
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目(nhooo.com)</title>
- <body style="background-color: aqua;">
- <p>單擊下面的按鈕以更改文檔的背景顏色：</p>
- <button>點(diǎn)我改變背景顏色</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()接受兩個(gè)必填參數(shù)-要監(jiān)聽(tīng)的事件和監(jiān)聽(tīng)器回調(diào)函數(shù)。
1. 語(yǔ)法
- element.addEventListener(event, listener, useCapture)
代碼解析：
第一個(gè)參數(shù)是事件的類(lèi)型(例如“ click”或“ mousemove”)。
第二個(gè)參數(shù)是事件發(fā)生時(shí)我們要調(diào)用的監(jiān)聽(tīng)函數(shù)。
第三個(gè)參數(shù)是一個(gè)布爾值，指定是使用事件捕獲。此參數(shù)是可選的。
注意：
不要為事件使用“ on”前綴。使用“ click”代替“ onclick”。
2. 將事件監(jiān)聽(tīng)添加到元素
將所有代碼放入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. 將多個(gè)事件監(jiān)聽(tīng)添加到同一元素
事件監(jiān)聽(tīng)似乎與事件處理程序?qū)傩苑浅Ｏ嗨疲撬鼈冇幸恍﹥?yōu)點(diǎn)。我們可以在同一元素上設(shè)置多個(gè)事件監(jiān)聽(tīng)，如以下示例所示：
- <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>
可以向元素添加不同類(lèi)型的事件：
示例
4. 傳遞參數(shù)
傳遞參數(shù)值時(shí)，請(qǐng)使用匿名函數(shù)，該函數(shù)使用參數(shù)調(diào)用指定的函數(shù)：
例
- var btn = document.querySelector("button");
- btn.addEventListener("click", function() {
- myFunc(x, y);
- });
5. 將事件監(jiān)聽(tīng)添加到Window對(duì)象
此外，可以addEventListener()在文檔和窗口對(duì)象上使用。
本示例使用以下addEventListener()方法將click事件附加到文檔：
- document.addEventListener("click", function() {
- alert("Hello World!!!");
- });
使用該addEventListener()方法將調(diào)整大小(resize)事件附加到窗口：
- window.addEventListener("resize", function() {
- box.innerHTML = Math.random();
- });
當(dāng)前，事件監(jiān)聽(tīng)是處理JavaScript中事件的最常見(jiàn)和首選方式。
二、removeEventListener()方法
可以使用該removeEventListener()方法從元素中刪除一個(gè)或所有事件。
語(yǔ)法：
- 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>
第一個(gè)參數(shù)是事件的類(lèi)型(例如“ click”或“ mousemove”)。
第二個(gè)參數(shù)是事件發(fā)生時(shí)我們要調(diào)用的函數(shù)。
三、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了如何進(jìn)行JavaScript事件監(jiān)聽(tīng) ，從最基本的語(yǔ)法開(kāi)始，如何將事件監(jiān)聽(tīng)添加到元素，如何進(jìn)行參數(shù)傳遞，如何添加到Window對(duì)象等等，都做了詳細(xì)的講解。通過(guò)用豐富的案例幫助大家更好理解。
我是前端進(jìn)階者。使用JavaScript 語(yǔ)言，方便大家更好理解，希望對(duì)大家的學(xué)習(xí)有幫助。
