搜尋
首頁web前端js教程深入淺析JS中的事件委託

深入淺析JS中的事件委託

Feb 01, 2021 pm 05:50 PM
javascript事件委託

深入淺析JS中的事件委託

為什麼要進行事件委託?

先實作一個小功能:在點選 HTML 的按鈕後,把訊息輸出到控制台。

為了實現這個小功能,你需要選擇按鈕,然後再用addEventListener() 方法來附加事件監聽器:

<button id="buttonId">Click me</button>

<script>
  document.getElementById(&#39;buttonId&#39;)
    .addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
</script>

以上就是偵聽單一元素(尤其是按鈕)上事件的方式。

如果需要監聽多個按鈕上的事件呢?以下是一個可能的實作:

<div id="buttons">
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  const buttons = document.getElementsByClassName(&#39;buttonClass&#39;);
  for (const button of buttons) {
    button.addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
  }
</script>

你可以在 Codesandbox 上查看它是怎樣工作的

按鈕清單被迭代為 for (const button of buttons) ,並且每個按鈕都被附加了一個新的偵聽器。另外在清單中的按鈕被新增或刪除後,你必須也要手動刪除或附加事件監聽器。

有沒有更好的方法?

幸運的是,如果我們使用「事件委託」模式的話,偵聽多個元素上的事件只需要一個事件偵聽器。

事件委託使用事件傳播機制的細節。想要要了解事件委託的工作原理,應該先了解什麼是事件傳播。

事件傳播

當你點擊下面 html 中的按鈕:

<html>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
    </div>
  </body>
</html>

點擊事件會觸發多少個元素?毫無疑問,按鈕本身會收到點擊事件。而且所有按鈕的祖先,甚至包括 documentwindow 物件也會收到。

點選事件的傳播分三個階段:

  • 擷取階段 —— 從windowdocument 和根元素開始,事件向下擴散至目標元素的祖先

  • 目標階段 —— 事件在使用者點擊的元素上觸發

  • 冒泡階段-最後,事件冒泡通過目標元素的祖先,一直到根元素documentwindow

深入淺析JS中的事件委託

深入淺析JS中的事件委託

addEventListener 方法的第三個參數captureOrOptions# :

element.addEventListener(eventType, handler[, captureOrOptions]);

使你可以捕捉來自不同階段的事件。

  • 如果缺少captureOrOptions 參數,或參數為false{capture:false},那麼偵聽器將會擷取目標(target)和冒泡階段(bubble phases)的事件
  • 如果參數是true{capture:true},那麼偵聽器將會偵聽捕獲階段(capture phase)的事件。

透過下面的程式碼,你會偵聽到在 元素上發生的捕獲階段的點擊事件:

document.body.addEventListener(&#39;click&#39;, () => {
  console.log(&#39;Body click event in capture phase&#39;);
}, true);

在這個Codesandbox 示範中,當點擊按鈕時,你可以在控制台中查看事件的傳播方式。

那麼事件傳播是怎麼幫助捕捉多個按鈕事件的呢?

這個演算法很簡單:把事件偵聽器附加到按鈕的父級,並在點擊按鈕時捕捉冒泡事件。這就是事件委託的工作方式。

3.事件委託

讓我們用事件委託來捕獲多個按鈕上的點擊:

<div id="buttons"> <!-- Step 1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById(&#39;buttons&#39;)
    .addEventListener(&#39;click&#39;, event => { // Step 2
      if (event.target.className === &#39;buttonClass&#39;) { // Step 3
        console.log(&#39;Click!&#39;);
      }
    });
</script>

開啟Codesandbox 演示,然後點擊任一按鈕,你會看到 'Click!' 訊息被記錄到控制台。

事件委託的想法很簡單。你不需要把委託事件監聽器直接附加到按鈕上,而是可以委託父監聽 <div id="buttons">。點選按鈕時,父元素的偵聽器將會捕捉<strong>冒泡事件</strong>(還記得前面所說事件傳播嗎?)。 <p>使用事件委託需要3個步驟:</p> <h4 id="步驟-決定要監視事件的元素的父級元素">步驟1:決定要監視事件的元素的父級元素</h4> <p>在上面的例子中,<code>  是按鈕的父元素。

步驟2:把事件偵聽器附加到父元素

document.getElementById('buttons') .addEventListener('click', handler)  將事件偵聽器附加到按鈕的父元素。此事件偵聽器也會對按鈕點擊做出反應,因為按鈕點擊事件冒泡通過祖先元素(由於事件傳播)。

步骤3:用 event.target 选择目标元素

单击按钮时,将会用event 对象参数调用处理函数。属性 event.target  访问在其上调度了事件的元素,在例子中是一个按钮:

// ...
.addEventListener(&#39;click&#39;, event => {
    if (event.target.className === &#39;buttonClass&#39;) {      
        console.log(&#39;Click!&#39;);
    }
});

顺便说明一下,event.currentTarget 指向事件侦听器直接附加到的元素。在例子中,event.currentTarget 是  <div id="buttons">。<p>现在,你可以看到事件委托模式的好处:事件委托仅需要一个事件侦听器,而不必像本文最初那样将侦听器附加到每一个按钮上。</p> <h2 id="总结">总结</h2> <p>当发生点击事件(或传播的任何其他事件)时:</p> <ul> <li>事件从 <code>windowdocument、根元素向下传播,并经过目标元素的祖先(捕获阶段);

  • 事件发生在目标(目标阶段)上;
  • 最后,事件在目标祖先之间冒出气泡,直到根元素 documentwindow(冒泡阶段)。
  • 该机制称为事件传播

    事件委托是一种有用的模式,因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。

    使用事件委托需要三个步骤:

    • 确定要监视事件的元素的父级元素

    • 把将事件侦听器附加到父元素

    • event.target 选择目标元素

    更多计算机编程相关知识,请访问:编程视频!!

    以上是深入淺析JS中的事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述
    本文轉載於:51cto。如有侵權,請聯絡admin@php.cn刪除
    JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

    JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

    神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

    JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

    Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

    Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

    如何安裝JavaScript?如何安裝JavaScript?Apr 05, 2025 am 12:16 AM

    JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

    在Quartz中如何在任務開始前發送通知?在Quartz中如何在任務開始前發送通知?Apr 04, 2025 pm 09:24 PM

    如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

    在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?Apr 04, 2025 pm 09:21 PM

    在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

    微信小程序webview中Vue.js動態style位移失效是什麼原因?微信小程序webview中Vue.js動態style位移失效是什麼原因?Apr 04, 2025 pm 09:18 PM

    在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

    在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?Apr 04, 2025 pm 09:15 PM

    在Tampermonkey中如何對多個鏈接進行並發GET請求並依次判斷返回結果?在Tampermonkey腳本中,我們經常需要對多個鏈...

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您聽不到任何人,如何修復音頻
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25:如何解鎖Myrise中的所有內容
    3 週前By尊渡假赌尊渡假赌尊渡假赌

    熱工具

    Safe Exam Browser

    Safe Exam Browser

    Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    Atom編輯器mac版下載

    Atom編輯器mac版下載

    最受歡迎的的開源編輯器

    SublimeText3 英文版

    SublimeText3 英文版

    推薦:為Win版本,支援程式碼提示!

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器