Run javascript when anchor is clicked in the footer tag?

Question

Here's my footer html:

<footer>
    <div>
         <a href='a.aspx'>test 1</a>
         <a href='b.aspx'>test 2</a>
    </div>
    <a href='c.aspx'>test 3</a>
<footer>

Is there a way to always run a javascript function whenever a link is clicked within <footer> before it redirects? And is it possible to also find where it will redirect to within the function?

Answer 1

Sure. .querySelectorAll is perfect selector for this.

 var footerAnchors = document.querySelectorAll("footer a"); footerAnchors.forEach(anchor => addClickListener(anchor)); function addClickListener(anchor){ anchor.addEventListener('click', (event) => { alert(event.target.href); event.preventDefault() }) }

 <footer> <div> <a href='a.aspx'>test 1</a> <a href='b.aspx'>test 2</a> </div> <a href='c.aspx'>test 3</a> <footer>

Answer 2

you can use querySelectorAll and forEach for this:

 document.querySelectorAll("footer a").forEach(function(elem) { elem.addEventListener("click", function(event) { event.preventDefault() //use this to stop the default redirect if you want to do that manually const linkTarget = event.target.href console.log(linkTarget) //use this however you like if (linkTarget.includes("a.aspx")) document.location = linkTarget //for example redirecting if it contains a.aspx }); });

 <footer> <div> <a href='a.aspx'>test 1</a> <a href='b.aspx'>test 2</a> </div> <a href='c.aspx'>test 3</a> <footer>

however, if you want to execute a function every time the site is left, not only by clicking a link, but also by clicking back in the browser for example, i suggest you use window.onbeforeunload for this, instead of event handlers in the footer: docs

Answer 3

You don't need to attach listeners to every anchor element.

Using event delegation you can attach a single event listener to the footer element, and in the callback function check whether or not the clicked element was an anchor — then execute code related to each specific case.

Element.matches() can be used to check if the element that was clicked was an anchor, and then Event.preventDefault() can be used to prevent the default navigation behavior for the clicked anchor.

Here's a complete example:

 const footer = document.querySelector('footer'); function handleFooterClick (ev) { console.clear(); // The click event was dispatched from an anchor element: if (ev.target.matches('a')) { // Prevent the default anchor navigation: ev.preventDefault(); console.log('You would have navigated to:', ev.target.href); } else { // Not an anchor: console.log('You clicked another element:', ev.target.tagName); } } footer.addEventListener('click', handleFooterClick);

 <footer> <h2>heading</h2> <div> <a href='a.aspx'>test 1</a> <a href='b.aspx'>test 2</a> </div> <a href='c.aspx'>test 3</a> </footer>