Adding Event Listeners on Elements – Javascript

by

The way you are doing it is fine, but your event listener for the click event should be like this:

button.addEventListener("click", function() { alert("alert");});

Notice, the click event should be attached with "click", not "onclick".

You can also try doing this the old way:

function onload() {
   var button = document.getElementById("buttonid");
   // add onclick event 
   button.onclick = function() { 
        alert("alert");
   }
}

Update 1

You need to also monitor for IE < 9, because those Vs use attachEvent(). Attach the event like this, so it will work with dinosaur browsers:

if(button.addEventListener){
    button.addEventListener('click', function() { alert("alert");});    
} else if(button.attachEvent){ // IE < 9 :(
    button.attachEvent('onclick', function() { alert("alert");});
}

Update 2

Based on your edit, this should work works just fine.

<html>
    <head>
        <script type="text/javascript">
            function init() {
                var button = document.getElementById("buttonid");
                if(button.addEventListener){
                    button.addEventListener("click", function() { alert("alert");}, false);
                } else if(button.attachEvent){
                    button.attachEvent("onclick", function() { alert("alert");});
                }
            };
            if(window.addEventListener){
                window.addEventListener("load", init, false);
            } else if(window.attachEvent){
                window.attachEvent("onload", init);
            } else{
               document.addEventListener("load", init, false);
            }
        </script>
    </head>
    <body>
        <input type="button" id="buttonid" value="click">
    </body>
</html>

Please, do not use window.onload = on_load();, this will prevent all other onload event listeners from getting fired, or you are risking for your event listener to get overwritten. Consider attaching the onload event the way I am suggesting above.

More Related Contents:

  1. How can I check if an element exists in the visible DOM?
  2. Get the string representation of a DOM node
  3. Difference between document.addEventListener and window.addEventListener?
  4. How to set DOM element as first child?
  5. Remove all child elements of a DOM node in JavaScript
  6. Changing website favicon dynamically
  7. Dynamically set value of a file input [duplicate]
  8. What is the difference between children and childNodes in JavaScript?
  9. What are passive event listeners?
  10. What is my script src URL?
  11. javascript access parent DOM across domains?
  12. How to add/remove a class in JavaScript?
  13. jQuery: how to change tag name?
  14. Why is the loop assigning a reference of the last index element to? [duplicate]
  15. Watch for Dynamically Added Class
  16. How can I remove all CSS classes using jQuery/JavaScript?
  17. Count immediate child div elements using jQuery
  18. Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight
  19. Get element node at caret position (in contentEditable)
  20. How to fill in form field, and submit, using javascript?
  21. event.toElement in IE8 and Firefox?
  22. JavaScript moving element in the DOM
  23. Where are constructors such as, `new Image()` and `new Option()`, documented?
  24. How to append text to a div element?
  25. Why is setTimeout(fn, 0) sometimes useful?
  26. Can I use document.getElementById() with multiple ids?
  27. Get Cell Location
  28. Attaching events after DOM manipulation using JQuery ajax
  29. Fill user name and password in a webpage using VBA
  30. Images failing to load in IE with DOM: 7009 error (unable to decode) in console

Leave a Comment