How to add click event to an element?

by

If you don’t have an id and don’t have any selector library and you want it to work in older browsers, then it takes a bit more work. If you can put an id on it, it’s quite simple. If not, it takes more code:

var links = document.getElementsByClassName("MyClass");
links[0].onclick = function() {
    // put your click handling code here
    // return(false) if you don't want default click behavior for the link
}

Since getElementsByClassName is not universally available in older browsers, you would need a shim to implement it when not present. Or, you could get all the links in your document with:

var links = document.getElementsByTagName("a");

and then cycle through that list until you find the one you want (perhaps checking the class name).

If you can put an ID on the link:

<a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>

Then, it just takes this code:

document.getElementById("specialLink").onclick = function() {
    // add code here
}

If you’re going to do this regularly, the adding an event listener is a little more extensible than using the onclick property, but if you don’t have any framework, then you need a function for adding an event listener that handles older versions of IE.

More Related Contents:

  1. $(document).click() not working correctly on iPhone. jquery [duplicate]
  2. React onClick function fires on render
  3. Why is this jQuery click function not working?
  4. Onclick javascript to make browser go back to previous page?
  5. Missing click event for inside element on firefox
  6. CSS Animation onClick
  7. JavaScript: Invoking click-event of an anchor tag from javascript
  8. How to simulate a mouse click using JavaScript?
  9. JavaScript click event listener on class
  10. onKeyPress Vs. onKeyUp and onKeyDown
  11. How can I get the scrollbar position with JavaScript?
  12. How can I capture the right-click event in JavaScript? [duplicate]
  13. Wait 5 seconds before executing next line
  14. How does a function in a loop (which returns another function) work? [duplicate]
  15. How to pass parameter to function using in addEventListener?
  16. Are there any standards for mobile device web browsers in terms of thread sleeping? [closed]
  17. Capture click on div surrounding an iframe
  18. How to completely DISABLE any MOUSE CLICK
  19. Native JS equivalent to jQuery delegation
  20. Looping through files for FileReader, output always contains last value from loop
  21. Change CSS properties on click
  22. event.clipboardData.setData in copy event
  23. Is there any way of passing additional data via custom events?
  24. Attribute onclick=”function()” not functioning as intended?
  25. Is event a global variable that is accessible everywhere inside the callback chain?
  26. Prevent click event from firing when dblclick event fires
  27. onclick calling hide-div function not working
  28. Are dynamically inserted tags meant to work?
  29. How do I get Greasemonkey to click on a button that only appears after a delay?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment