学习javascript中的事件——事件流

最新推荐文章于 2024-10-07 21:15:54 发布

转载最新推荐文章于 2024-10-07 21:15:54 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ARMdong/p/5328826.html

本文详细介绍了HTML中与JavaScript交互的事件流概念，包括事件捕获、目标阶段和事件冒泡三个阶段，并通过实例展示了如何使用addEventListener方法在不同阶段监听点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件概念：　　

　　HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流？

　　事件流描述的是从页面中接收事件的顺序。

　　1、DOM事件流

　　“DOM2级事件”规定的事件流包括三个阶段：

　　① 事件捕获阶段；

　　② 处于目标阶段；

　　③ 事件冒泡阶段；

　　案例说明：页面中有一个id为btn的按钮，当点击这个按钮的时候，都发生了些什么？　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件流</title>
	<script>
		
	window.onload = function(){

		var oBtn = document.getElementById('btn');
		
		oBtn.addEventListener('click',function(){
			console.log('btn处于事件捕获阶段');
		}, true);
		oBtn.addEventListener('click',function(){
			console.log('btn处于事件冒泡阶段');
		}, false);

		document.addEventListener('click',function(){
			console.log('document处于事件捕获阶段');
		}, true);
		document.addEventListener('click',function(){
			console.log('document处于事件冒泡阶段');
		}, false);

		document.documentElement.addEventListener('click',function(){
			console.log('html处于事件捕获阶段');
		}, true);
		document.documentElement.addEventListener('click',function(){
			console.log('html处于事件冒泡阶段');
		}, false);

		document.body.addEventListener('click',function(){
			console.log('body处于事件捕获阶段');
		}, true);
		document.body.addEventListener('click',function(){
			console.log('body处于事件冒泡阶段');
		}, false);

	};

	</script>
</head>
<body>
	<a href="javascript:;" id="btn">按钮</a>
</body>
</html>

　　当我们点击这个btn的时候，看看页面都输出了什么：