Как навешать обработчик событий на созданный элемент?

Question

saveCard.addEventListener('click', () => {
    flashcards.insertAdjacentHTML('afterbegin', `
    
    <div class = "flashcard">
        <h2 class = 'Hone' style = "border-top:1px solid red; padding: 15px; margin-top:30px">${question.value}</h2>
        <h2 class = 'Htwo' style = "text-align:center; display:none; color:red">${answer.value}</h2>
    </div>

    `)
})

Вот я создал карточку и теперь мне надо при нажатии на блок Htwo менялся цвет текста, которых находится в Htwo. Как мне навесить событие на блок, который я только что создал?

Answer 1

Это делается как и при обычном навешивании события. Ищется элемент в DOM дереве и добавляется слушатель через addEventListener.

Подвох тут может крыться в том, что элементов с одним классом может быть много и если каждый раз навешивать слушателя при добавлении - то события будут накапливаться и поэтому

либо перед добавлением нового элемента надо будет отключать слушателя с этих классов, а после добавлении вновь всем прикреплять
либо добавлять элемент динамически через createElement и тогда слушателя можно повесить конкретно на данный элемент, пример
```
let div = document.createElement('div');
div.innerHTML = 'Hello, World!';
div.onclick = function() {
    alert(111);
};

let anotherDiv = document.getElementById('content');
anotherDiv.appendChild(div);
```

Answer 2

Как добавлять обработчик вам уже написали, я же напишу как при желании можно обойтись одним обработчиком.

Для этого надо всего лишь повесить событие на любой родительский элемент (в примерах я вешаю его на body, но обычно можно найти более подходящего родителя).

Для начала, вот так это делается на jquery (за что эту библиотеку и любят - ну или любили когда-то):

$(document.body).on('click', '.Htwo', function(event) {
    $(event.currentTarget).style('color', 'blue');
})

На ванильном JS это делается чуть сложнее, но тоже ничего сложного:

document.body.addEventListener('click', function (event) {
    const target = event.target.closest('.Htwo');
    if (!target) return;

    target.style.color = 'blue';
});

БЛОГ НА HUSL

Как навешать обработчик событий на созданный элемент?

Ответы (2 шт):