Здраствуйте, подскажите пожалуйста как я могу вызвать событие не для самого глубокого элемента, а для элемента выше его.
Я написал скрипт для изменения цвета рамки и возврата названия класса у элемента на который кликаешь, но проблема в том, что сам обработчик мне нужно поставить в самый главный родительский элемент div, а потом с помощью event.target отлавливать события на дочерних элементах div, но если и у последних есть дочерний элемент, то событие будет отлавливаться на нем, что мне не нужно.
Я только недавно начал изучать javascript, многих вещей еще не понимаю, так что прошу прощения за невнятную формулировку, проще будет показать с помощью кода.
Вот мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.row{
display: flex;
height: 183px;
}
.column{
width: 180px;
border: 1px solid black;
}
.tes{
background-color: blue;
}
</style>
</head>
<body>
<div class="puzzle">
<div class="row">
<div id = "1" class="column">
<div class="tes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Deleniti fa
cilis illum quasi quibusdam voluptatibus.
A beatae enim harum maiores molestiae mollitia
nisi omnis perferendis quibusdam quis quo rei
ciendis, soluta vel.</div>
</div>
<div id = "2" class="column"></div>
<div id = "3" class="column"></div>
<div id = "4" class="column"></div>
</div>
<div class="row">
<div id = "5" class="column"></div>
<div id = "6" class="column"></div>
<div id = "7" class="column"></div>
<div id = "8" class="column"></div>
</div>
<div class="row">
<div id = "9" class="column"></div>
<div id = "10" class="column"></div>
<div id = "11" class="column"></div>
<div id = "12" class="column"></div>
</div>
</div>
<script>
const test = document.querySelector(".puzzle");
test.onclick = function (event) {
event.target.style.borderColor = 'red';
let name = event.target.classList.item(0);
console.log(name);
}
</script>
</body>
</html>
