Capturing all the <a> click event

javascript events capture
user1589188 picture user1589188 · Sep 23, 2012 · Viewed 43.7k times · Source

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

KooiInc picture KooiInc · Sep 23, 2012

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

Related questions

Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
How to trigger event in JavaScript?

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. How can I do it?

Read More