Learn event bubbling to easily achieve complex interactive effects

Master event bubbling and easily achieve complex interactive effects. Specific code examples are required

Event bubbling (Event Bubbling) is an important concept in front-end development. It means that when an event on an element is triggered, the event will automatically propagate to the parent element until it propagates to the document root element. By mastering the principles and applications of event bubbling, we can easily implement complex interactive effects and improve user experience. The following will use specific code examples to help readers better understand and apply event bubbling.

Code Example 1: Click to expand and collapse effect

HTML structure:

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

CSS style:

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

JavaScript code:

// 获取容器元素
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';
        }
    }
});

The above code implements a simple click expand and collapse effect. When the title is clicked, the display state of the content will be switched. Through event bubbling, we only need to listen to the event on the container element to achieve unified control of all titles.

Code Example 2: Using event delegation to implement list item deletion function

HTML structure:

<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 style:

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

JavaScript code:

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

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

The above code implements a simple list item deletion function. When the delete button next to the list item is clicked, through event delegation, we can listen to the click event through the parent element, obtain the clicked list item in the event handler, and then remove it from the list.

Through the above two code examples, we can see the power of event bubbling. Using event bubbling, we can simplify code, improve development efficiency, and achieve complex interactive effects. After mastering the principles and applications of event bubbling, I believe readers will be more comfortable in front-end development.

The above is the detailed content of Learn event bubbling to easily achieve complex interactive effects. For more information, please follow other related articles on the PHP Chinese website!