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”。
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)