Declaration Order Issue

Say I have a code snippet like the one below:

var elm1 = document.getElementById('elm1');
var elm2 = document.getElementById('elm2');

function doStuff(e) {
// Some stuff is done here...
}

function addListeners(e) {
elm1.addEventListener('click', doStuff, false);
elm2.addEventListener('click', doStuff, false);
}

window.addEventListener('load', addListeners, false);
This code will generate an error, namely "elm1 has no properties". To many I guess this isn't very surprising, and my own take on this is that the addListeners function is run before the variables are declared. But what I fali to see is why? To me, a fair beginner with JS, everything is in its right place. What am I missing?

I would very much appretiate if someone could explain the order (when and where to declare the different parts) in which my code here should be ran. Is there something special to have in mind when using window.addEventListener('load', functionname, fasle);?