Home > Article > Web Front-end > JS bubbling event parsing guide: must-read material for beginners
JS bubbling event parsing guide: must-read material for beginners
- 王林Original
- 2024-01-13 10:21:061248browse
Must-read for beginners: Introduction to JS bubbling events and analysis of application scenarios
Introduction:
In Web development, JavaScript (JS) is a very important programming language. After mastering the basic syntax and operations of JS, understanding the event mechanism of JS is the key to further improving your capabilities. Among them, bubbling events are an important concept in the JS event mechanism. This article will introduce the concepts, principles and practical application scenarios of JS bubbling events in detail, and provide specific code examples to help beginners better understand and master them.
1. Concept:
Bubbling event means that when an element triggers an event, the event will be triggered in the parent element in sequence until it is triggered to the outermost ancestor element. This process is like a bubble rising from the bottom, so it is called a bubbling event.
2. Principle:
The principle of bubbling events is based on the DOM tree structure, that is, the document object model. In a web page, all elements (including HTML tags and elements created by JS) can be regarded as nodes of a DOM tree. When an event occurs on an element, the JS engine will trigger the same type of event in sequence according to the structure of the DOM tree, that is, trigger the same event on the parent element until the outermost ancestor element.
3. Code example 1: Basic use of bubbling events
The following is a simple HTML code fragment that demonstrates the basic use of bubbling events:
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件示例</title>
</head>
<body>
<div id="outer">
<div id="inner">
<button id="btn">点击触发冒泡事件</button>
</div>
</div>
<script>
// 选择DOM元素
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');
// 添加冒泡事件监听
outer.addEventListener('click', function() {
console.log('父级元素outer被点击');
});
inner.addEventListener('click', function() {
console.log('子级元素inner被点击');
});
btn.addEventListener('click', function() {
console.log('按钮被点击');
});
</script>
</body>
</html>In the above code, We added click event listeners to the parent element outer, the child element inner and the button element btn. When we click the button, the following information will be output on the console:
按钮被点击 子级元素inner被点击 父级元素outer被点击
This is because the click event of the button element bubbles to the inner child element and the parent element outer, and triggers the corresponding event callback function.
4. Code example 2: Application scenarios of bubbling events
The application scenarios of bubbling events are very wide. Below we take the shopping cart item deletion function as an example to demonstrate the practical application of bubbling events.
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件应用场景示例</title>
<style>
.item {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
}
.delete-btn {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cart">
<div class="item">
商品1
<span class="delete-btn">删除</span>
</div>
<div class="item">
商品2
<span class="delete-btn">删除</span>
</div>
<div class="item">
商品3
<span class="delete-btn">删除</span>
</div>
</div>
<script>
// 选择DOM元素
const cart = document.querySelector('#cart');
// 添加冒泡事件监听
cart.addEventListener('click', function(event) {
const target = event.target;
if (target.classList.contains('delete-btn')) {
const item = target.parentNode;
item.remove();
console.log('删除成功');
}
});
</script>
</body>
</html>In the above code, we added a click event listener for the delete button of each product element. When the delete button is clicked, the "Delete Successfully" message is output in the console and the corresponding product element is removed from the shopping cart. This is because when the delete button is clicked, the bubbling event will trigger the click event listening function on the parent element cart. By determining whether the clicked target element is a delete button, the specific deletion function can be implemented.
Summary:
Bubble events are an important concept in the JS event mechanism and a part that cannot be ignored in Web development. Through this article's detailed introduction to the concepts, principles, and practical application scenarios of bubbling events, I believe that beginners have already had a preliminary understanding and mastery of bubbling events. I hope this article can help beginners better understand and apply bubbling events and improve their JS programming skills.
The above is the detailed content of JS bubbling event parsing guide: must-read material for beginners. For more information, please follow other related articles on the PHP Chinese website!