How do I add a click event for buttons when the page loads?

Question

I want to add click events for all buttons on a page once the page has finished loading, I tried changing 'click' to 'onload' but that did not work so I must be doing something wrong. The addClickEvent is a function that adds seperate click events for the buttons so that they do different things depending on which button you click on. So, how do I get this to work properly?

EDIT : It might have been unclear but I want to have the addClickEvent already applied when the page is loaded, otherwise it makes me having to double click the buttons for the desired effect.

var allButtons = document.getElementsByTagName('button');

for (i = 0; i < allButtons.length; i++) {
    allButtons[i].addEventListener('click', addClickEvent);
}
allButtons[0].removeEventListener('click', addClickEvent); //this removes the click event for the first button

Answer 1

You can register an load event on document!

    document.addEventListener("load", function(){
      var allButtons = document.getElementsByTagName('button');

      for (i = 0; i < allButtons.length; i++) {
        allButtons[i].addEventListener('click', addClickEvent);
      } 
      allButtons[0].removeEventListener('click', addClickEvent);
});

UPDATE

Okay you can something like this

window.addEventListener("load", function(){
    var allButtons = document.getElementsByTagName('button');

    allButtons.addEventListener('click', addClickEvent);
    allButtons[0].removeEventListener('click', addClickEvent); 
});

function addClickEvent(evt){
    switch(evt.toElement.value)){
        "edit":
            //Your code
            break;
        "delete":
           //Your code
           break;
        "complete":
           //Your code
           break;
        default:
          console.log("Error");
          break;
    }
} 

Answer 2

You use click-events to attach click-event-handlers, that's what creates the middle-hand. Do it directly inside a window-load without need for a special addClickEvent function like so:

document.addEventListener('load', function() {
    // declare all functions in an object, easy to find, develop, and call them
    var funcs = {
            'edit': function() { /* your edit-code here */ },
            'delete': function() { /* your delete-code here */ }, // delete is keyword, that's why quoted
            'complete': function() { /* your complete-code here */ }
        },
        butts = document.getElementsByTagName('button'),
        fnc;
    for (var i = butts.length; i >= 0; i--) { // step backwards needs only one lookup for length
        if (fnc = funcs[butts[i].getAttribute('name')]) { // get function equal to button name
            butts[i].addEventListener('click', fnc); // apply it
        }
    }
    /* more code after document has loaded */
});

If this not completely fit your needs feel free to post some critique.