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>

結果

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/94355.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/94355.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/94355.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！