小说网,穿越小说完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇文章帶你了解JavaScript 事件監(jiān)聽(tīng)

大家好，我是前端進(jìn)階者。JavaScript事件處理程序的最新功能是事件監(jiān)聽(tīng)。事件監(jiān)聽(tīng)監(jiān)視元素上的事件。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、修武網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、addEventListener()方法

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

可以重寫隨機(jī)顏色，如下所示：

例：

 
 
 
   
  
  
     
  
  
     
  
  
      項(xiàng)目(nhooo.com)   
  
  
     
  
  
         
  
  
     
  
  
          單擊下面的按鈕以更改文檔的背景顏色：

將addEventListener()方法附加到按鈕上。addEventListener()接受兩個(gè)必填參數(shù)-要監(jiān)聽(tīng)的事件和監(jiān)聽(tīng)器回調(diào)函數(shù)。

1. 語(yǔ)法

 
 
 
   
  
  
  element.addEventListener(event, listener, useCapture)

代碼解析：

第一個(gè)參數(shù)是事件的類型(例如“ 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ù)中是非常合適的，如下所示：

還可以引用外部“命名”函數(shù)：

示例

3. 將多個(gè)事件監(jiān)聽(tīng)添加到同一元素

事件監(jiān)聽(tīng)似乎與事件處理程序?qū)傩苑浅Ｏ嗨?，但是它們有一些?yōu)點(diǎn)。我們可以在同一元素上設(shè)置多個(gè)事件監(jiān)聽(tīng)，如以下示例所示：

可以向元素添加不同類型的事件：

示例

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);

案例：

第一個(gè)參數(shù)是事件的類型(例如“ 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í)有幫助。

文章標(biāo)題：一篇文章帶你了解JavaScript 事件監(jiān)聽(tīng)
URL鏈接：http://fisionsoft.com.cn/article/djgishp.html