Как обрабатывать клик по любой ссылке?

Question

[alekamisleforma]

Мне нужно, чтобы при клике на любую ссылку отрабатывалась функция. Попытался сделать так, но не работает.

document.getElementsByTagName('a').onclick = function() {}

Возможно дело в том, что, если я правильно понял, getElementsByTagName возвращает массив всех, в моем случае, ссылок. Подскажите, как правильно?

Answer 1

[FinGanapre]

Конкретно ваш код не отрабатывает, т.к. к вам приходит псевдо-массив (NodeList) всех элементов a в документе. Вы могли бы пройтись по нему циклом и повесить на каждый элемент обработчик, но так делать не нужно. Во-первых, вы заставляете браузер искать все a на странице, во-вторых - вешаете обработчик на каждую. При этом, делаете это через цикл.

Так как по умолчанию все события всплывают (это поведение можно изменить, а также отменить всплытие события на элементе), т.е. клик на вложенный элемент можно поймать в родительском, лучше вешать все обработчики на документ.

// вешаем обработчик на документ
// если повесите на каждую ссылку - то кол-во обработчиков будет равно кол-ву ссылок
// так себе идея
document.addEventListener('click', e => {
  // определяем, что клик произошёл на ссылке
  if (e.target.nodeName === 'A') {
    // отменяем переход по ссылке
    e.preventDefault()
    console.log('do some there')
  }
})

getElementsByTagName - не стоит использовать. Сейчас прекрасно работают querySelector и querySelectorAll. Из старых способов получения элементов можете пользоваться разве что getElementById, т.к. он отработает чуть быстрее

Comments

[alekamisleforma]

Большое спасибо за код и подробное объяснение! Все работает)