práctica recomendada para agregar oyentes de eventos (javascript, html)

Question

Sé que puedo estar preguntando por la luna aquí, pero estoy buscando algunas opiniones con experiencia sobre la mejor forma de agregar oyentes de eventos o más bien 'Cuando' o 'Dónde' para agregarlos en el archivo js.

Tome mi ejemplo. Tengo una página que tiene un montón de eventos onclick que ahora tienen que ser manejado por las propiedades en el archivo JS

por ejemplo

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

Mi pregunta es dónde exactamente debo añadir esto en el archivo JS.

Como yo estaba planeando ir sobre él era tener algo como lo siguiente

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

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

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

Así que una vez que el documento está listo, sólo entonces son todos los detectores de eventos añaden. ¿Es esto aceptable o hay una forma más universalmente aceptada de hacerlo?

NOTA: Sé que esta pregunta puede parecer subjetiva, por lo que voy con la respuesta correcta será la forma más popular en la que ha visto a los oyentes de eventos vistos agregados. Estoy seguro de que debe haber una aceptación mayoritaria sobre esto y me disculpo por adelantado si es similar a algo en lo que debes declarar las variables, al principio o cuando las necesites.

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

Answer 1

Realmente desea poder agregar todos los oyentes de su evento en el mismo lugar; ¿por qué? Simplemente por la facilidad de mantenimiento.

Debido a esto, el mejor lugar para poner a todos sus oyentes de eventos es en un lugar donde puede garantizar todos los elementos que posiblemente quiera vincular a los controladores de eventos están disponibles.

Esta es la razón por el lugar más común para unir sus controladores de eventos es después del evento DOMReady ha disparado $(document).ready().

Como siempre, hay son algunas excepciones a la regla. Muy ocasionalmente, es posible que desee vincular un controlador de eventos a un elemento tan pronto como como está disponible; que es después de que se haya definido la etiqueta de cierre del elemento. En este caso, el fragmento de seguimiento se debe utilizar:

<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> 

La otra cosa que usted debe tener en cuenta es cómo se va a obligar a sus manipuladores. Si se atiene a: DOMElement.onclick = function() { };, se está limitando a vincular el controlador por evento.

En cambio, el enfoque de seguimiento le permite enlazar Muliple manipuladores por evento:

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

Answer 2

¿Hay alguna razón específica por la cual usted no sólo tiene que especificar la asociación cuando se declara el elemento en el html
<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
supongo que sí.