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”。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js事件冒泡、事件捕获和阻止默认事件详解 - Python技术站