如何<a>在文本“示例”之后的 javascript 中</a>触发<a>标记事件</a>

Question

I need to fire an javascript event when anchor tags, after a certain text, is clicked. My page contains lot of anchor tags and i need to fire an event only when the anchor tags below the text "example" is clicked without using any class name or ids. Is it possible?

Answer 1

If you can add any id or class to your example article you can add the event listener for that in JavaScript:

<article>ABC</article>
<a></a>
<article class='exampleArticle'>Example</article>
<a></a>
<a></a>
<article>ABC</article>

<script>

 var ele = document.querySelector('.exampleArticle')
 // For first tag
 ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }
// For second tag
ele.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }



</script>

Answer 2

If I'm correctly understanding what you mean, you can set event listeners by using an id for each anchor tag eg

<article>ABC</article>
<a></a>
<article>Example</article>
<a id="fire-event1" href="#">Anchor1</a>
<a id="fire-event2" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent1 = document.getElementById("fire-event1");
  var fireEvent2 = document.getElementById("fire-event2");

  fireEvent1.addEventListener("click", myFunction1);
  fireEvent2.addEventListener("click", myFunction2);

  function myFunction1() {
    alert("Event 1 activated");
  }
  function myFunction2() {
    alert("Event 2 activated");
  }
</script>

or, if you want several anchors to fire with the same function, allocate the target anchors to a class and then cycle through them to set the listener on each one eg

<article>ABC</article>
<a></a>
<article>Example</article>
<a class="fire-event" href="#">Anchor1</a>
<a class="fire-event" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent = document.getElementsByClassName("fire-event");

  for (var i = 0; i < fireEvent.length; i++) {
    fireEvent[i].addEventListener('click', myFunction);
  }

  function myFunction() {
    alert("Event fired");
  }
</script>

JSFiddle

Answer 3

Vaibhav Kumar's answer will work with the given example, but note that it has syntax errors because he has not closed the parentheses on the addEventListener statements. They should be:

ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

It's also going to get very messy if you want to add the listener to a lot of HTML tags - soon it's going to look like...

ele.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

To set a listener to trigger the same function on a number of HTML tags, just allocate a class to the tags you want to target; for triggering separate functions, use id or classes. See my full answer with example code.