學習事件冒泡，輕鬆實現複雜的互動效果

掌握事件冒泡，輕鬆實現複雜互動效果，需要具體程式碼範例

事件冒泡（Event Bubbling）是前端開發中一個重要的概念，它指的是當一個元素上的事件被觸發後，該事件會自動向父級元素傳播，直到傳播到文檔根元素。掌握了事件冒泡的原理和應用，我們可以輕鬆實現複雜的互動效果，提升使用者體驗。以下將透過具體的程式碼範例，來幫助讀者更好地理解和應用事件冒泡。

程式碼範例一：點選展開與收起效果

HTML結構：

<div class="container">
    <div class="header">标题</div>
    <div class="content">
        <p>内容</p>
    </div>
</div>

CSS樣式：

.container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
}
.header {
    background-color: #eee;
    cursor: pointer;
}
.content {
    display: none;
}

JavaScript程式碼：

// 获取容器元素
var container = document.querySelector('.container');

// 监听容器元素的点击事件
container.addEventListener('click', function(event) {
    // 判断点击的是标题元素
    if (event.target.classList.contains('header')) {
        // 获取内容元素
        var content = event.target.nextElementSibling;
        
        // 切换内容的显示状态
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    }
});

上述程式碼實現了一個簡單的點擊展開和收起效果。當點擊標題時，會切換內容的顯示狀態，透過事件冒泡，我們只需要在容器元素上監聽事件，就可以實現對所有標題的統一控制。

程式碼範例二：利用事件委託實作清單項目刪除功能

HTML結構：

<ul class="list">
    <li>列表项1 <span class="delete">删除</span></li>
    <li>列表项2 <span class="delete">删除</span></li>
    <li>列表项3 <span class="delete">删除</span></li>
    <li>列表项4 <span class="delete">删除</span></li>
</ul>

CSS樣式：

.delete {
    color: red;
    cursor: pointer;
}

JavaScript程式碼：

// 获取列表元素
var list = document.querySelector('.list');

// 监听列表元素的点击事件
list.addEventListener('click', function(event) {
    // 判断点击的是删除按钮
    if (event.target.classList.contains('delete')) {
        // 获取点击的列表项
        var listItem = event.target.parentNode;
        
        // 移除列表项
        list.removeChild(listItem);
    }
});

上述程式碼實作了一個簡單的清單項目刪除功能。當點擊清單項目旁邊的刪除按鈕時，透過事件委託，我們可以透過父級元素監聽到該點擊事件，並在事件處理函數中取得到被點擊的清單項，然後將其從清單中移除。

透過以上兩個程式碼範例，我們可以看到事件冒泡的強大之處。利用事件冒泡，我們可以簡化程式碼，提高開發效率，實現複雜的互動效果。掌握了事件冒泡的原理和應用，相信讀者在前端開發中將會更加得心應手。

以上是學習事件冒泡，輕鬆實現複雜的互動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！