Как задать событие создаваемому элементу в JavaScript

133

09 мая 2022, 11:10

Я хочу создать элемент div JS кодом
Я делаю так:

var node = document.createElement("div");
node.className = "el"
node.onclick = this.remove();
...

Дальше идёт append node к ещё одному div

Результат:

<div class="el">

Вопрос: Где onclick?

Я пытался сделать вот так:

node.onclick = "this.remove()"
node.onclick = function() {this.remove()}
node.onclick = () => {this.remove()}
node.onclick = this.remove();
node.addEventListener("onclick", (event) => {node.remove()}, false)

Ничего из этого не работает и даже не выдаёт ошибку, зато если просто ввести node.remove(), то оно удаляет элемент

То же самое и с другими событиями элемента

Ну так как мне добавить событие нажатия (желательно через node.onclick)?

Answer 1

//вариант 1 (вы присваиваете результат функции вызванной у непонятного контекста)

node.onclick = function(){this.remove()};

//вариант 2

node.addEventListener('click',function(){
  this.remove()
});

Answer 2

var node = document.createElement("div");
node.className = "el";
node.onclick = function() {
  this.remove()
};
document.getElementById('test').append(node);

#test {
  border: 2px solid black;
  padding: 5px;
}
.el {
  border: 2px solid lightgreen;
  width: 120px;
  height: 20px;
}

<div id="test"></div>

Answer 3

Обработчик добавляется через addEventListener. https://www.w3schools.com/js/js_htmldom_eventlistener.asp#:~:text=The%20addEventListener()%20method&text=You%20can%20add%20many%20event,i.e%20the%20window%20object.