Question

I am thinking of to add a javascript function to capture all the <a> click events inside a html page.

So I am adding a global function that governs all the <a> click events, but not adding onclick to each (neither using .onclick= nor attachEvent(onclick...) nor inline onclick=). I will leave each <a> as simple as <a href="someurl"> within the html without touching them.

I tried window.onclick = function (e) {...}
but that just captures all the clicks
How do I specify only the clicks on <a> and to extract the links inside <a> that is being clicked?

Restriction: I don’t want to use any exra libraries like jQuery, just vanilla javascript.

Answer 1

Use event delegation:

document.addEventListener(`click`, e => {
  const origin = e.target.closest(`a`);
  
  if (origin) {
    console.clear();
    console.log(`You clicked ${origin.href}`);
  }
});

<div>
  <a href="#l1">some link</a>
  <div><a href="#l2"><div><i>some other (nested) link</i></div></a></div>
</div>

[edit 2020/08/20] Modernized