Handling “onclick” event with pure JavaScript

by

All browsers support this (see example here):

mySelectedElement.onclick = function(e){
    //your handler here
}

However, sometimes you want to add a handler (and not change the same one), and more generally when available you should use addEventListener (needs shim for IE8-)

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

Here is a working example:

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

And html:

<button id='myButton'>Hello</button>

(fiddle)

Here are some useful resources:

More Related Contents:

  1. How can I capture the right-click event in JavaScript? [duplicate]
  2. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  3. event.preventDefault() vs. return false (no jQuery)
  4. Accessing an object’s property from an event listener call in JavaScript
  5. Pass mouse events through absolutely-positioned element
  6. jQuery equivalent of JavaScript’s addEventListener method
  7. How do you detect the clearing of a “search” HTML5 input?
  8. Are event handlers in JavaScript called in order?
  9. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  10. Fire oninput event with jQuery
  11. Replacement for deprecated `keypress` DOM event
  12. jQuery.click() vs onClick
  13. Document.write clears page
  14. Is there an onSelect event or equivalent for HTML ?
  15. How can I trigger an onchange event manually? [duplicate]
  16. How to pass parameter to function using in addEventListener?
  17. How do you log all events fired by an element in jQuery?
  18. How can I show a hidden div when a select option is selected?
  19. Javascript trick for ‘paste as plain text` in execCommand
  20. Capture click on div surrounding an iframe
  21. Attach an event in a child iframe to a handler in the parent window
  22. Checkbox Check Event Listener
  23. event.offsetX in Firefox
  24. HTML DOM: Which events do not bubble?
  25. Detect if user clicks inside a circle
  26. jQuery: How to listen for DOM changes?
  27. Is event a global variable that is accessible everywhere inside the callback chain?
  28. submit event does not fire if submit initiated programmatically
  29. onclick event function in JavaScript
  30. How can I remove a JavaScript event listener?

Leave a Comment