JS事件冒泡、事件捕获和阻止默认事件
事件冒泡
事件冒泡是指当一个元素触发了某个事件时，该事件会从子元素一直冒泡到祖先元素。例如，当一个按钮被点击时，点击事件会首先被触发，然后该事件会向外冒泡，一直到文档根节点才停止。
事件捕获
事件捕获是指当一个元素触发了某个事件时，该事件会从祖先元素一直捕获到子元素。例如，当一个按钮被点击时，点击事件会从文档根节点开始捕获，直到被点击的按钮才停止。
阻止默认事件
有些元素会有默认的事件行为，例如a标签的点击会跳转页面，表单的提交会刷新页面等。为了防止这些默认行为发生，我们可以使用preventDefault()方法来中止默认事件的执行。例如，当点击一个a标签时，可以使用以下代码防止跳转：
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
});
事件流模型
事件流模型分为两种：捕获型事件流和冒泡型事件流。在捕获型事件流中，事件首先从最外层的祖先元素被捕获，接着沿着树形结构依次触发，最后到达目标元素；在冒泡型事件流中，事件首先从目标元素开始，沿着树形结构依次向上冒泡，最终到达祖先元素。默认情况下，所有的事件都是冒泡型事件流。
示例一：事件冒泡
<body>
<div id="grandparent">
<div id="parent">
<div id="child"></div>
</div>
</div>
</body>
document.querySelector('#grandparent').addEventListener('click', function(){
console.log('Grandparent clicked');
});
document.querySelector('#parent').addEventListener('click', function(){
console.log('Parent clicked');
});
document.querySelector('#child').addEventListener('click', function(){
console.log('Child clicked');
});
当点击child元素时，依次输出“Child clicked”，“Parent clicked”和“Grandparent clicked”。
示例二：阻止默认事件
<body>
<a href="http://www.baidu.com">点击跳转</a>
</body>
document.querySelector('a').addEventListener('click', function(event){
event.preventDefault();
console.log('Link clicked, but default behavior prevented');
});
当点击a标签时，阻止了跳转并输出“Link clicked, but default behavior prevented”。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！