[JavaScript知识库] 13、JS事件（事件绑定、事件流、阻止事件冒泡、取消元素默认行为）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 13、JS事件（事件绑定、事件流、阻止事件冒泡、取消元素默认行为） -> 正文阅读

[JavaScript知识库]13、JS事件（事件绑定、事件流、阻止事件冒泡、取消元素默认行为）

1、事件绑定（`onclick`、`addEventListener`）

区别	`onclick`与`addEventListener`
`onclick`	在同一元素的同一事件类型添加多个事件，会被覆盖。不可以设置元素在捕获阶段触发的事件
`addEventListener`	在同一元素的同一事件类型添加多个事件，不会被覆盖。可以设置元素在捕获阶段（从外到内）触发的事件

	<script>
		// 1、事件绑定(onclick)
		var btn = document.querySelector('button');
		btn.onclick = function () {
			console.log('Hello world!');
		}

		// 2、事件绑定(addEventListener)
		btn.addEventListener("click", function () {
			console.log('Hello world!');
		})

	</script>

2、事件流（`addEventListener`）

当事件被触发时，事件有两个流向，一个是从内到外（事件冒泡），一个是从外到内（事件捕获）
默认情况下，事件会在冒泡阶段运行
addEventListener(evenType.fun,boolean)//默认false:冒泡阶段触发；true:捕获阶段触发

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.big {
			width: 300px;
			height: 300px;
			background-color: black;
		}

		.medium {
			width: 200px;
			height: 200px;
			background-color: bisque;
		}

		.small {
			width: 100px;
			height: 100px;
			background-color: aquamarine;
		}
	</style>
</head>

<body>
	<!-- 1、事件绑定 -->
	<button>button</button>

	<!-- 2、事件流 -->
	<div class="big">
		<div class="medium">
			<div class="small"></div>
		</div>
	</div>
	<script>
		// 1、事件绑定(onclick)
		var btn = document.querySelector('button');
		btn.onclick = function () {
			console.log('Hello world!');
		}

		// 2、事件绑定(addEventListener)
		btn.addEventListener("click", function () {
			console.log('Hello world!');
		})

		// 3、事件流
		var big = document.querySelector('.big');
		var medium = document.querySelector('.medium');
		var small = document.querySelector('.small');
		big.addEventListener('click', function () {
			console.log('big');
		});
		medium.addEventListener('click', function () {
			console.log('medium');
		});
		small.addEventListener('click', function () {
			console.log('small');
		});

		// 输出结果：small、medium、big
	</script>
</body>

</html>

3、阻止事件冒泡（`stopPropagation`）

		small.addEventListener('click', function (e) {
			console.log('small');
			e.stopPropagation();
		});
		// 输出结果：small

3、取消元素默认行为（`preventDefault`）

<body>
	
	<!-- 3、阻止事件默认行为 -->
	<a href='https://www.iconfont.cn'>阿里巴巴矢量库</a>
	<script>
		// 3、阻止事件默认行为
		var a = document.querySelector('a');
		a.onclick = function (e) {
			console.log('Hello world!');
			// 方法一
			e.preventDefault();
			// 方法二
			return false;
		}
	</script>
</body>

</html>