Detect which link (with no id) was clicked?

JavaScript
23

I use w3schools edit & run editor ,
why doesn’t Sitepoint have the same ,
it would be good for business :slight_smile:

24

Still trying to understand how this mechanism works:

 link[c].addEventListener('click', WhichLinkWasClicked);

How does js determine of the list of links ,
which link was clicked , since the click occurred before the addEventListener . Does the ‘clicked on link’ have a marker or something .
Thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
</head>
<body>
<p>This example uses the addEventListener() method to catch which kink was clicked.</p>
<a href="https://www.google.com">Visit google.com</a><br>
<a href="https://www.duckduckgo.com">Visit duckduckgo.com</a><br>
<a href="https://www.w3schools.com">w3schools.com</a>
<script>
	var link = document.querySelectorAll( 'a' );
	for ( var c = 0; c < link.length; c ++ ) {
         link[c].addEventListener('click', WhichLinkWasClicked);
      }
function WhichLinkWasClicked(evt) {
    evt.preventDefault();
    alert( evt.target ) ; 
		}
</script>
</body>
</html>
25

Here is how it does that, from the code that you posted.

var link = document.querySelectorAll( 'a' )

That link variable is confusing because it implies that it’s only one link. I would rename it to links instead so that it’s more clear that is is a list of multiple links.

I am puzzled about why you think that the click occurred before the addEventListener.

After the page content is shown and the script is run, the web page waits for interaction from you. When you click on a link, any events associated with that link are run. After that if evt.preventDefault() has not occurred, the default action for that link occurs.

Yes it does. You can access a wide variety of information about the click event via the evt object.

1 Like
26

Well this is the sequence of what is happening:

  • You acquire a list of all links
  • To each of those links, you’re adding an click event listener with the callback function WhichLinkWasClicked
  • Now whenever a link is getting clicked, a click event is getting dispatched, triggering the event listener for that specific element
  • As a consequence, WhichLinkWasClicked is getting called with that click event as its argument, and the event has a target property pointing to the respective element

BTW instead of alert()ing the event target, try logging it to the console which allows for more detailed inspection. Also see here for a more thorough introduction to events:

27

Thanks All;
What was confusing me is I forgot that this get executed first

<script>
	var links = document.querySelectorAll( 'a' );
	for ( var c = 0; c < link.length; c ++ ) {
         links[c].addEventListener('click', WhichLinkWasClicked);
      }

But this gets executed only if it is called (a link was clicked)

function WhichLinkWasClicked(evt) {
    evt.preventDefault();
    alert( evt.target ) ; 
		}

I was looking at it as if the whole thing gets executed together

<script>
	var links = document.querySelectorAll( 'a' );
	for ( var c = 0; c < link.length; c ++ ) {
         links[c].addEventListener('click', WhichLinkWasClicked);
      }
function WhichLinkWasClicked(evt) {
    evt.preventDefault();
    alert( evt.target ) ; 
		}
</script>

Thanks for your patience…

2 Likes
28

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.