学习javascript中的事件——事件流-优快云博客

本文详细解析HTML中与JavaScript交互的事件驱动机制，重点介绍事件流的概念及其在DOM2级事件中的三个阶段：事件捕获、处于目标阶段和事件冒泡阶段。通过代码示例展示事件在不同DOM节点间传播的过程，并讨论不同浏览器对事件流的支持情况。

事件概念：　　

　　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的时候，看看页面都输出了什么：