JavaScript 中的事件委託與事件傳播-js教程-PHP中文網

JavaScript 中的事件委託與事件傳播

WBOY

發布： 2024-07-19 06:05:20

原創

1001 人瀏覽過

Event Delegation vs Event Propagation in JavaScript

JavaScript 開發人員經常需要管理 Web 應用程式中事件的處理方式，其中的兩個重要概念是事件委託和事件傳播。理解這些概念可以顯著提高程式碼的效率和可維護性。讓我們深入了解它們是什麼以及它們有何不同。

事件傳播

事件傳播描述了事件被觸發後在 DOM 中傳播的方式。事件傳播分為三個階段：

1。捕獲階段：事件從視窗開始，向下遍歷目標元素的祖先，直到到達目標。

2。目標階段： 事件到達目標元素。

3。冒泡階段： 事件從目標元素向上冒泡，經由其祖先回到視窗。

預設情況下，JavaScript 中的大多數事件都使用冒泡階段，這表示當子元素上觸發事件時，它也會在其所有祖先元素上觸發。您也可以透過指定擷取選項來處理擷取階段的事件。

// Capturing phase
element.addEventListener('click', function(event) {
    console.log('Capturing phase:', this);
}, true);

// Bubbling phase (default)
element.addEventListener('click', function(event) {
    console.log('Bubbling phase:', this);
});

登入後複製

活動委託

事件委託利用事件傳播來有效管理事件。您無需向多個子元素新增事件偵聽器，而是向父元素新增單一事件偵聽器。此偵聽器利用事件冒泡來處理其子元素的事件。

活動委託的優點

1。效能： 減少事件偵聽器的數量，這可以提高效能，尤其是在處理大量元素時。

2。動態元素： 簡化動態新增元素的事件處理，因為您不需要將事件偵聽器附加到每個新元素。

事件委託範例

考慮一個項目列表，其中每個項目都可以點擊。您無需向每個項目新增點擊事件偵聽器，而是向父容器新增一個偵聽器。

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

登入後複製

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Item clicked:', event.target.textContent);
    }
});

登入後複製

在此範例中，任何 li 元素上的點選事件都會向上冒泡到處理該事件的 ul 元素。