JS中的事件監聽

来源:https://www.cnblogs.com/ronaldo9ph/archive/2023/05/30/17442392.html
-Advertisement-
Play Games

JavaScript的事件監聽是一種機制,用於在HTML文檔中的元素上註冊事件處理程式,以便在特定事件發生時執行相應的JavaScript代碼。 事件監聽的基本思想是將事件處理程式(也稱為事件回調函數)綁定到特定的事件上。所謂特定的事件是當用戶與頁面進行交互時,比如點擊按鈕、鍵盤輸入、滑鼠移動等,瀏 ...


JavaScript的事件監聽是一種機制,用於在HTML文檔中的元素上註冊事件處理程式,以便在特定事件發生時執行相應的JavaScript代碼。

事件監聽的基本思想是將事件處理程式(也稱為事件回調函數)綁定到特定的事件上。所謂特定的事件是當用戶與頁面進行交互時,比如點擊按鈕、鍵盤輸入、滑鼠移動等,瀏覽器會生成的相應事件。當該事件發生時,瀏覽器會調用相應的事件處理程式來執行特定的操作。



以下是一個簡單的示例,展示如何在JavaScript中實現事件監聽:

// 獲取按鈕元素
var myButton = document.getElementById("myButton");

// 添加事件監聽器
myButton.addEventListener("click", function() {
  console.log("按鈕被點擊了!");
});

在上述示例中,我們首先通過 getElementById 方法獲取具有"id"為"myButton"的按鈕元素。然後,使用 addEventListener 方法為該按鈕添加了一個點擊事件監聽器。當按鈕被點擊時,事件處理程式中的代碼將被執行,輸出"按鈕被點擊了!"到控制台。




除了基本的事件監聽外,還有一些相關概念:

1. 事件傳播 :事件傳播是指當一個事件在DOM樹中的元素上觸發時,它會在元素之間按照特定的路徑進行傳播。事件傳播分為三個階段,其中的捕獲階段和冒泡階段,可以通過在 addEventListener 方法的第三個參數中設置 true 或 false 來控制事件是在捕獲階段還是冒泡階段進行處理,預設是在冒泡階段處理。還有一個目標階段,即事件傳播到其事件目標。
2. 事件對象 :當事件發生時,瀏覽器會創建一個事件對象,其中包含有關事件的信息和屬性。事件對象可以通過事件處理程式的參數傳遞給事件處理函數,可以使用事件對象來獲取有關事件的詳細信息,例如事件類型、目標元素、鍵盤按鍵等。
3. 事件委托 :事件委托是一種常用的技術,用於處理動態生成的元素或大量相似元素的事件監聽。它通過將事件監聽器綁定到它們共同的父元素上,利用事件傳播機制,在父元素上捕獲事件並根據目標元素的屬性來執行相應的操作。這樣可以減少事件監聽器的數量,提高性能和代碼的可維護性。
4. 移除事件監聽器 :除了添加事件監聽器,還可以通過 removeEventListener 方法來移除已註冊的事件監聽器。需要確保移除的事件監聽器與添加時的事件類型、回調函數和使用的階段相匹配。

 



還有一些其他的方面和註意事項:

1. 事件類型 :JavaScript支持多種事件類型,包括滑鼠事件(如點擊、移動、滾動等)、鍵盤事件(如按鍵、釋放、輸入等)、表單事件(如提交、輸入變化等)、頁面生命周期事件(如載入、卸載等)等。可以根據需要選擇適合的事件類型進行監聽。
2. 多個事件監聽器 :我們可以為同一個元素的同一個事件類型添加多個事件監聽器。它們會按照添加的順序執行。這可以用於實現多個不同的處理邏輯或模塊之間的解耦。
3. 事件處理程式中的this :在事件處理程式中,關鍵字 this 引用觸發事件的元素。可以使用 this 來操作和訪問事件目標的屬性和方法。註意,在箭頭函數中, this 的上下文與常規函數不同。
4. 阻止事件預設行為 :某些事件具有預設的行為,例如點擊鏈接將導航到URL,提交表單將刷新頁面等。可以使用 event.preventDefault() 方法來阻止事件的預設行為。這對於自定義處理用戶交互非常有用。
5. 停止事件傳播 :在事件傳播過程中,事件會沿著DOM樹進行傳播,從而影響到多個元素。可以使用 event.stopPropagation() 方法停止事件繼續傳播,阻止其他元素上的事件監聽器被觸發。

 



通過事件監聽,可以實現與用戶交互相關的動態行為和響應,為網頁或應用程式增加交互性和實時性。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 推理題類的數據有一些,比如《1000道邏輯推理考題ACCESS資料庫》、《近5千偵探腦筋急轉彎選擇題ACCESS資料庫》等,但是今天遇到了一份有些圖片的推理題庫,感覺非常不錯,就是記錄數少了一些,請看以下截圖,截圖包含所有欄位,所有圖片放在一個文件夾中。 分類情況如下:邏輯推理(60)、腦筋急轉彎( ...
  • 截圖下方有顯示“共有記錄數”,截圖包含了表的所有欄位列。該數據提供ACCESS資料庫文件(擴展名是MDB)以及EXCEL文件(擴展名是XLS)。 共有23710條記錄,根據AUTHOR_ID關聯AUTHORS作者表中的ID欄位 包含6567個作者,根據ID關聯QUOTES表中的AUTHOR_ID欄位 ...
  • Health Kit文檔全新升級,開發場景更清晰,聚焦你關心的問題,快來一起嘗鮮! 文檔入口請戳:[文檔入口~](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/description-000000155 ...
  • Flutter開發中三棵樹的重要性不言而喻,瞭解其原理有助於我們開發出性能更優的App,此文主要從源碼角度介紹Element樹的管理類BuildOwner。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 核心 使用CSS變數, 準備兩套CSS顏色, 一套是在 light模式下的顏色,一套是在dark模式下的顏色 dark模式下的 CSS 權重要比 light 模式下的權重高, 不然當我們給html添加自定義屬性[data-theme='d ...
  • # VuePress v2.0 項目創建 參考:[VuePress v2.0 文檔](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html) ### 1.創建文件夾 我創建了一個文件夾,然後在文件夾中打開了powershell ``` ...
  • 有時候在系統中需要一次性下載多個文件,但逐個下載文件比較麻煩。這時候,最好的解決辦法是將所有文件打包成一個壓縮文件,然後下載這個壓縮文件,這樣就可以一次性獲取所有所需的文件了。 下麵是一個名為CompressUtil的工具類的代碼,它提供了一些方法來處理文件壓縮和下載操作: ```java impo ...
  • 在寫這篇文章的時候,查看了下electron最新穩定版本由幾天前24.4.0升級到了25了,不得不說electron團隊迭代速度之快! 前幾天有分享一篇electron24整合vite4全家桶技術構建桌面端vue3應用示常式序。 https://www.cnblogs.com/xiaoyan2017 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...