当前位置：首页 > news >正文

JS--获取事件的子元素与父元素

news 2025/8/5 11:00:44

原文网址：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>

结果