一篇文章帶你瞭解JavaScript 事件監聽

點擊上方「 前端進階學習交流 」，進行關注

回覆「前端」便可獲贈前端相關學習資料javascript

今html

日前端

雞java

湯web

鄉心新歲切，天畔獨潸然。

你們好，我是前端進階者。JavaScript事件處理程序的最新功能是事件監聽。事件監聽監視元素上的事件。sql

1、addEventListener()方法

addEventListener()方法將事件處理程序附加到指定的元素。微信

能夠重寫隨機顏色，以下所示：app

例：less

<!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()接受兩個必填參數-要監聽的事件和監聽器回調函數。
dom

1. 語法

element.addEventListener(event, listener, useCapture)

代碼解析：

第一個參數是事件的類型（例如「 click」或「 mousemove」）。

第二個參數是事件發生時咱們要調用的監聽函數。

第三個參數是一個布爾值，指定是使用事件捕獲。此參數是可選的。

注意：

不要爲事件使用「 on」前綴。使用「 click」代替「 onclick」。

2. 將事件監聽添加到元素

將全部代碼放入addEventListener()方法中的匿名函數中是很是合適的，以下所示：

<script>let para = document.querySelector("#para");
para.addEventListener("click", function() {this.innerHTML = "Hello world";});</script>

還能夠引用外部「命名」函數：

示例

<script>let para = document.querySelector("#para");para.addEventListener("click", changeText);
function changeText() {para.innerHTML = "Hello world";}</script>

3. 將多個事件監聽添加到同一元素

事件監聽彷佛與事件處理程序屬性很是類似，可是它們有一些優勢。咱們能夠在同一元素上設置多個事件監聽，如如下示例所示：

<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. 傳遞參數

傳遞參數值時，請使用匿名函數，該函數使用參數調用指定的函數：

例

var btn = document.querySelector("button"); btn.addEventListener("click", function() { myFunc(x, y);});

5. 將事件監聽添加到Window對象

此外，能夠addEventListener()在文檔和窗口對象上使用。

本示例使用如下addEventListener()方法將click事件附加到文檔：

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

使用該addEventListener()方法將調整大小(resize)事件附加到窗口：

window.addEventListener("resize", function() {box.innerHTML = Math.random();});

當前，事件監聽是處理JavaScript中事件的最多見和首選方式。

2、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>

第一個參數是事件的類型（例如「 click」或「 mousemove」）。

第二個參數是事件發生時咱們要調用的函數。

3、總結

本文基於JavaScript基礎，介紹瞭如何進行JavaScript事件監聽，從最基本的語法開始，如何將事件監聽添加到元素，如何進行參數傳遞，如何添加到Window對象等等，都作了詳細的講解。經過用豐富的案例幫助你們更好理解。

我是前端進階者。使用JavaScript 語言，方便你們更好理解，但願對你們的學習有幫助。

------------------- End -------------------

往期精彩文章推薦：

歡迎你們點贊，留言，轉發，轉載，感謝你們的相伴與支持

想加入前端學習羣請在後臺回覆【入羣】

萬水千山老是情，點個【在看】行不行

本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。