Есть ли возможность при всплытии проверить не target, а более внешний элемент на событие
Контент с кнопками добавляется динамически. Вместо того, чтобы каждый раз вешать обработчики, я добавил обработчик на постоянно существующиего родителя с проверкой event.target. Стоит ли так делать? И как быть, если в к кнопке есть другое элементы? Мне пришлось костылить, добавлять к каждому вложенному элементу тот же признак (data атрибут). Сейчас только один вложенный элемент, но если их будет много .. Была идея использовать closest, но когда клик не по кнопке в блоке, то проверка происоходит до самого корня. Есть ли возможность ограничить поиск closest только в пределах блока без велосипеда? Может есть другой хороший вариант? P.s. не отклонять совпадения вне блока, а вообще не проверять, меня беспокоит потенциальное падение производительности с ростом вложенности
let counter = 0
a.onclick = e => {
let inner = document.createElement('div')
inner.className = 'block'
inner.innerHTML += `
<button data-close>
[button] #${counter++}<div>[div]<i>Hide</div>
</button>
`
outer.append(inner)
}
outer.onclick = e => {
let button = e.target.closest('[data-close]')
if (button) button.closest('.block').remove()
}
div, button {
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
<button id="a">Create</button>
<div id="outer"></div>