Event.target в JS

250

25 июля 2022, 22:30

Помогите, пожалуйста, разобраться в работе event:

function logEvent(event) {
   console.log(event)
   console.log(event.target)
}
<h1 onclick="logEvent()">Click<h1>

Почему здесь в первом логе выводит undefined, а во втором - TypeError: 'target' is not a function ?

Answer 1

Вам необходимо передать параметр в функцию, под названием event.

function logEvent(e) {
  console.log(e.target)
}

<h1 onclick="logEvent(event)">Click</h1>

Лучше навешивать слушатели в js файле, дабы не искать потом в огромном html файле, где там происходит onclick.

Как пример:

const clickable = document.querySelector('.clickable') // если несколько элементов, то используйте querySelectorAll
function logEvent (e) {
  console.log(e.target)
}
clickable.addEventListener('click', logEvent) // 1 вариант
clickable.addEventListener('click', e => logEvent(e)) // 2 вариант (читайте про стрелочные функции и их отличия от обычных
clickable.onclick = logEvent // 3 вариант, тоже можно, но лучше так не делать :)