Question

How to correctly do something like the following without using jQuery.

   $(document).ready(function(){
      $("#someButton").click(function(){
        alert("Hello");
      });
   });

Thanks.

Answer 1

The easiest way is:

// DOM Level 0 way
window.onload = function () {
  document.getElementById("someButton").onclick = function() {
    alert("Hello");
  };
};

This will work on all browsers but note that with this approach only one event handler can be attached to an event.

Also notice that the onload event is not completely equivalent to the jQuery’s ready event, onload will be fired when all the resources of the page are completely loaded (images, sub-frames, etc…), while ready fires as soon the DOM has been parsed.

If you want to attach multiple event handlers, you can use the DOM Level 2 Standard element.addEventListerner method (or element.attachEvent for IE)

The simplest abstraction to get a cross-browser way to bind events is:

function addEvent(el, eventType, handler) {
  if (el.addEventListener) { // DOM Level 2 browsers
    el.addEventListener(eventType, handler, false);
  } else if (el.attachEvent) { // IE <= 8
    el.attachEvent('on' + eventType, handler);
  } else { // ancient browsers
    el['on' + eventType] = handler;
  }
}

Then you can:

var button = document.getElementById("someButton");
addEvent(button, 'click', function () {
  alert("Hello");
});

addEvent(button, 'click', function () {
  alert("world!");
});

Be aware also that the addEventListener and the IE’s attachEvent methods have their differences, when you attach multiple handlers to an event with addEventListener they will be fired in the same order, as the handlers were bound (FIFO), attachEvent will trigger the handlers in the contrary order (LIFO).

Check an example here.