addEventListener vs onclick: какой из них использовать?

И AddEventListener (), и onclick прослушивают событие. Оба могут выполнять функцию обратного вызова при нажатии кнопки. Однако они не совпадают. Ниже приводится краткое объяснение каждого из них, чтобы помочь вам понять, какой из них использовать.

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

btn.onclick = () => console.log('button clicked');

addEventListener (), с другой стороны, может иметь несколько обработчиков событий, примененных к одному и тому же элементу. Он не перезаписывает другие существующие обработчики событий.

В этом примере мы создаем прослушиватель событий для элемента кнопки в const btn. Когда слышится событие щелчка, активируется функция buttonClicked () и регистрирует «нажатие кнопки» на консоли.

function listenToButtonClick() {
  const btn = document.createElement('button');
  btn.addEventListener('click', function buttonClicked(e) {
    console.log('button clicked');
  })
}

Какой из них использовать?

Если вам нужно прикрепить к элементу более одного события, вы, вероятно, захотите использовать addEventListener (). Хотя люди не рекомендуют использовать события onclick, они быстро и сделай свое дело.

Как удалить обработчики событий?

Чтобы удалить обработчик событий, ранее зарегистрированный с помощью метода addEventListener (), вы можете использовать removeEventListener (). Чтобы использовать removeEventListener (), нам нужен доступ к функции, которая была добавлена ​​изначально. В приведенном ниже примере buttonClicked () выходит за рамки, и мы не сможем удалить его. Следующий код не работает:

function add() {
  const btn = document.createElement('button');
  btn.addEventListener('click', function buttonClicked(e) {
    console.log('button clicked');
  })
}
function removeClickEvent() {
  //this doesn't work because buttonClicked is out of scope
  btn.removeEventListener('click', buttonClicked); 
}

Чтобы удалить событие из функции buttonClicked (), мы должны написать следующий код:

const btn = document.createElement('button');
btn.addEventListener('click', function buttonClicked(e) {
  console.log('button clicked');
})
function removeClickEvent() {
  btn.removeEventListener('click', buttonClicked);
}

Нам нужен доступ к обработчику событий, чтобы его можно было удалить. Если бы указанная выше функция была определена как анонимная, мы не смогли бы использовать removeEventListener (). Однако, если анонимная функция определена как выражение функции, мы сможем передать имя переменной, чтобы удалить событие.