best practice on adding event listeners (javascript, html)

Question

I know I may be asking for the moon here but I'm looking for some experienced opinons on the best way to add event listeners or rather 'When' or 'Where' to add them in the js file.

Take my take as an example. I have a page which has a bunch of onclick events that now have to be handled by properties in the JS file

eg

var test = document.getElementById("i-am-element");
test.onclick = testEventListener;

My question is where exactly I should add this in the js file.

How I was planning to go about it was to have something like the following

$(document).ready(function() {
    var test = document.getElementById("test-me-shane");
    test.onclick = testEventListener;

    //add all the functions to different elements
});

myfunction1(){}
myfunction2(){}
myfunction3(){}

So that once the document is ready, only then are all the event listeners added. Is this acceptable or is there are more universally accepted way of doing it.

NOTE: I know this question may appear subjective so I'm going with the correct answer will be the most popular way you've seen seen event listeners added. I'm sure there must be a majority acceptance on this and I apologize in advance if its similiar to something like where you should declare variables, at the start or when you need them.

In Java, should variables be declared at the top of a function, or as they're needed?

Answer 1

You really want to be able to add all your event listeners in the same place; why? Simply for ease-of-maintenance.

Because of this, the best place to put all your event listeners is in a place where you can guarantee all elements you'll possibly want to bind event handlers to are available.

This is why the most common place to bind your event handlers is after the DOMReady event has fired $(document).ready().

As always, there are some exceptions to the rule. Very occasionally, you might want to bind an event handler to an element as soon as it is available; which is after the closing tag of the element has been defined. In this instance, the following snippet should be used:

<div id="arbitrary-parent">
    <h1 id="arbitrary-element">I need an event handler bound to me <strong>immediately!</strong></h1>
    <script>document.getElementById("arbitrary-element").onclick = function () { alert("clicked"); }</script>
</div>

The other thing you should consider is how you are going to bind your handlers. If you stick to: DOMElement.onclick = function () { };, you're limiting yourself to binding on handler per event.

Instead, the following approach allows you to bind multiple handlers per event:

function bind(el, evt, func) {
    if (el.addEventListener){
        el.addEventListener(evt, func, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evt, func);
    }
}