JavaScript-事件委託

阿新 • • 發佈：2021-01-24

技術標籤：JavaScript javascript dom

原理：不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然後利用冒泡原理影響設定每個子節點。

作用：只操作一次DOM，提高了程式的效能。

程式碼演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function 
(e) {
            e.target.style.backgroundColor = 'pink';
            alert('haha');
        })
    </script>
</body>

</html>

結果：
點選任何一個 li 都會彈出視窗
在這裡插入圖片描述
並且點選哪一個小 li 哪一個就會變成粉色背景，因為設定了target

JavaScript事件委託實現原理及優點進行

1、什麼是事件委託？事件委託就是利用冒泡的原理，將事件加到父元素或祖先元素上，觸發執行效果。

JavaScript-事件委託

技術標籤：JavaScriptjavascriptdom 原理：不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然後利用冒泡原理影響設定每個子節點。

javascript 事件委託

僅作為個人筆記使用，不進行詳細說明參考：https://blog.csdn.net/lszyzs/article/details/106876057

JavaScript事件委託原理

目錄一、什麼是事件委託二、事件委託的原理三、事件委託的作用一、什麼是事件委託

JavaScript事件代理（事件委託）

基本概念事件代理（Event Delegation），又稱之為事件委託。是JavaScript中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結在子元素的響應事件（click、keydown......）委託給父元素，讓父元素擔

JavaScript中的事件委託機制跟深淺拷貝

今天聊下JavaScript中的事件委託跟深淺拷貝一、事件委託首先呢，介紹一下事件繫結

淺析JavaScript中的事件委託機制跟深淺拷貝

今天聊下JavaScript中的事件委託跟深淺拷貝一、事件委託首先呢，介紹一下事件繫結

JavaScript給事件委託批量新增事件監聽詳細流程

1.什麼是事件委託事件委託：利用事件冒泡的特性，將本應該註冊在子元素上的處理事件註冊在父元素上，這樣點選子元素時發現其本身沒有相應事件就到父元素上尋找作出相應。這樣做的優勢有：

javascript事件冒泡,事件捕獲和事件委託詳解

1、事件冒泡：在事件傳播過程中，當事件在一個元素上出發之後，事件會逐級傳播給先輩元素，直到document為止，有的瀏覽器可能到window為止。並不是所有的事件都有冒泡現象，比如如下幾個：blur事件，focus事件， lo

一篇文章告訴你如何用事件委託實現JavaScript留言板功能

用事件委託實現留言板功能。 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

淺談JavaScript的事件（事件委託）

　　事件處理程式為Web程式提供了系統互動，但是如果頁面中的事件處理程式太多，則會影響頁面的效能。每個函式都是物件，都會佔用記憶體，記憶體中物件越多，效能越差。需要事先為DOM物件指定事件處理程式，導致訪問

JavaScript事件物件與事件的委託

事件物件包含事件相關的資訊，如滑鼠、時間、觸發的DOM物件等 js預設將事件物件封裝好，並自動的以引數的形式，傳遞給事件處理函式的第1個引數，如下：

DOM 事件模型/機制和事件委託

1，DOM級別有DOM0~4級，其中dom1級沒有定義相關事件就不是標準的dom事件，它似乎是專注於 HTML 和 XML 文件模型

JavaScript事件冒泡機制原理例項解析

這篇文章主要介紹了JavaScript事件冒泡機制原理例項解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JQuery事件委託(適用於給動態生成的指令碼元素新增事件)

最近一段時間打了一個大仗，現在總算消停點，才有時間來做個總結吧算是：

javascript事件迴圈event loop的簡單模型解釋與應用分析

本文例項講述了javascript事件迴圈event loop的簡單模型解釋與應用.分享給大家供大家參考，具體如下：

深入分析JavaScript 事件迴圈(Event Loop)

事件迴圈（Event Loop），是每個JS開發者都會接觸到的概念，但是剛接觸時可能會存在各種疑惑。

JavaScript事件

事件的型別：　　滑鼠事件，鍵盤事件，進度事件，表單事件，突變事件（修改DOM節點間時發生），觸控事件，錯誤事件（出錯時發生）

一個事件委託的例子

HTML: container中有三個pane，點選按鈕pane會消失 <div id=\"container\"> <div class=\"pane\">

事件委託實現樹形選單

HTML： <ul class=\"tree\" id=\"tree\"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li>