JS--获取事件的子元素与父元素
原文网址：JS--获取事件的子元素与父元素-CSDN博客
简介
本文介绍JS如何获取事件的子元素与父元素。
情景描述
事件监听写在父元素上，我点击子元素时触发了事件，怎样通过事件获取子元素和这个父元素？
点击子元素时，事件会冒泡到父元素上，并触发事件处理程序。
方法
event.target：获取当前点击的子元素
event.currentTarget：获取父元素
示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>获取子元素和父元素</title><style>.parent {background-color: lightblue;padding: 20px;}.child {background-color: pink;padding: 10px;margin: 10px;}</style>
</head>
<body>
<div class="parent"><div class="child">子元素 1</div><div class="child">子元素 2</div>
</div><script>const parentElement = document.querySelector('.parent');parentElement.addEventListener('click', function(event) {// 获取点击的子元素const clickedChild = event.target;console.log('点击的子元素：', clickedChild);// 获取父元素const parent = event.currentTarget;console.log('父元素：', parent);});
</script>
</body>
</html>
结果
