js事件委托，解决在父级上绑定事件，子级是复杂层级无法直接通过event.target获取到的问题

九段刀客2023-10-30 17:33

html 复制代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.item1 {
				display: inline-block;
				margin-bottom: 10px;
				padding: 10px;
				background-color: greenyellow;
			}
			
			.item-2 {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>

		<div class="box" data-value='box'>
			<div class="item1" data-value='你好啊'>
				<div class="item-2" data-value="item-2">
					<button>文章</button>
				</div>
			</div>
			<div class="item1" data-value='你好啊'>
				<div class="item-2" data-value="item-2">
					<button>文章</button>
				</div>
			</div>
			<div class="item1" data-value='你好啊'>
				<div class="item-2" data-value="item-2">
					<button>文章</button>
				</div>
			</div>
		</div>
		<script>
			document.querySelector('.box').addEventListener('click', event => {
				const composedPath = event.composedPath();
				for (const element of composedPath) {
					if (element.classList && element.classList.contains('item1')) {
						console.log(element.dataset.value)
						break;
					}
				}
			})
		</script>
	</body>
</html>