為何同一事件會觸發兩次冒泡？-js教程-PHP中文網

首頁

web前端

js教程

為何同一事件會觸發兩次冒泡？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 19, 2024 pm 10:34 PM

事件冒泡事件點擊事件重複冒泡

為何同一事件會觸發兩次冒泡？

為何同一個事件冒泡會重複發生兩次？

事件冒泡是一種在瀏覽器中常見的事件傳遞機制。當一個元素觸發了某個事件，這個事件將會從被觸發的元素開始向上級元素依序傳遞，直到傳遞到了文件的根元素。這個過程就像水泡在水中冒起，所以被稱為事件冒泡。

然而，有時我們會發現同一個事件冒泡會重複發生兩次，這是為什麼呢？原因主要有兩個面向：事件註冊和事件處理。

首先，我們需要明確的是，事件註冊是指將事件綁定到某個元素上。在常見的網頁開發中，我們通常會使用addEventListener()方法來為元素新增事件監聽器。當我們使用此方法為元素新增事件監聽器時，有時會出現重複的情況。例如：

var element = document.getElementById('myElement');
element.addEventListener('click', function() {
    console.log('事件冒泡');
});

登入後複製

在上述程式碼中，我們為一個名為"myElement"的元素新增了一個點擊事件監聽器。然而，如果我們在程式碼中多次呼叫了addEventListener()方法，並為同一個元素添加了相同類型的事件監聽器，那麼每次呼叫都會新增一個新的監聽器，導致同一個事件多次發生冒泡。

其次，事件處理是指在事件觸發後執行的程式碼。在事件傳遞過程中，當事件從子元素傳遞到父元素時，會觸發父元素上的對應事件處理程序。然而，有時我們會不小心在父元素的事件處理程序中再次觸發子元素的相同類型事件，導致同一個事件冒泡發生兩次。

下面的程式碼範例將說明以上的兩種情況：

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡</title>
</head>
<body>
    <div id="parentElement">
        <div id="childElement">点击我</div>
    </div>

    <script>
        var parentElement = document.getElementById('parentElement');
        var childElement = document.getElementById('childElement');

        parentElement.addEventListener('click', function() {
            console.log('父元素的事件处理程序');
            childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
        });

        childElement.addEventListener('click', function() {
            console.log('子元素的事件处理程序');
        });
    </script>
</body>
</html>

登入後複製

在上述程式碼中，我們給父元素和子元素分別加入了click事件的監聽器，當父元素的click事件觸發時，會列印出"父元素的事件處理程序"並觸發子元素的click事件，導致子元素的click事件再次觸發並列印出"子元素的事件處理程序"。這樣，同一個事件冒泡了兩次。

為了避免事件冒泡發生兩次，我們可以在父元素的事件處理程序中加入一個判斷條件，只有在符合條件的情況下才觸發子元素的相應事件，從而避免重複冒泡。

綜上所述，同一個事件冒泡重複發生兩次的原因主要是事件註冊和事件處理中出現了重複操作。我們可以透過優化事件註冊的方式和加入條件判斷來避免重複冒泡的發生。

以上是為何同一事件會觸發兩次冒泡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7482

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

利用Golang開發功能強大的桌面應用 Mar 19, 2024 pm 05:45 PM

利用Golang開發功能強大的桌面應用隨著網路的不斷發展，人們已經離不開各種類型的桌面應用程式。而對於開發人員來說，如何利用高效率的程式語言來開發功能強大的桌面應用至關重要。本文將介紹如何利用Golang（Go語言）來開發功能強大的桌面應用，並提供一些具體的程式碼範例。 Golang是一種由Google開發的開源程式語言，它具有簡潔、高效、並發性強等特點，非常適

vue中圖片怎麼加入碰事件 May 02, 2024 pm 10:21 PM

如何為 Vue 中的圖片新增點擊事件？導入 Vue 實例。建立 Vue 實例。在 HTML 模板中新增圖片。使用 v-on:click 指令新增點擊事件。在 Vue 實例中定義 handleClick 方法。

鴻蒙 HarmonyOS 與 Go 語言開發 Apr 08, 2024 pm 04:48 PM

鴻蒙HarmonyOS與Go語言開發簡介鴻蒙HarmonyOS是華為開發的分散式作業系統，而Go是一種現代化的程式語言，兩者的結合為開發分散式應用提供了強大的解決方案。本文將介紹如何在HarmonyOS中使用Go語言進行開發，並透過實戰案例加深理解。安裝與設定要使用Go語言開發HarmonyOS應用，你需要先安裝GoSDK和HarmonyOSSDK。具體步驟如下：#安裝GoSDKgogetgithub.com/golang/go#設定PATH

PHP技巧：快速實現返回上一頁功能 Mar 09, 2024 am 08:21 AM

PHP技巧：快速實現回到上一頁功能在網頁開發中，常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗，讓使用者更方便地在網頁之間進行導航。在PHP中，我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能，並提供具體的PHP程式碼範例。在PHP中，我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL

C++ 函式在並發程式設計中的事件驅動機制？ Apr 26, 2024 pm 02:15 PM

並發程式設計中的事件驅動機制透過在事件發生時執行回呼函數來回應外部事件。在C++中，事件驅動機制可用函數指標實作：函數指標可以註冊回呼函數，在事件發生時執行。 lambda表達式也可以實現事件回調，允許建立匿名函數物件。實戰案例使用函數指標實作GUI按鈕點擊事件，在事件發生時呼叫回呼函數並列印訊息。

JavaScript 取得網頁元素詳解 Apr 09, 2024 pm 12:45 PM

答：JavaScript提供了多種取得網頁元素的方法，包括使用id、標籤名、類別名稱和CSS選擇器。詳細描述：getElementById(id)：根據唯一id取得元素。 getElementsByTagName(tag)：取得具有指定標籤名的元素組。 getElementsByClassName(class)：取得具有指定類別名稱的元素組。 querySelector(selector)：使用CSS選擇器取得第一個符合元素。 querySelectorAll(selector)：使用CSS選擇器取得所有匹配