Enganche en un evento onClick sin usar la propiedad HTML

Question

Me gustaría mantener mi código JavaScript y HTML separados. Para hacer esto, yo quiero estar seguro de que nunca uso la siguiente sintaxis:

<input type="text" name="text" onClick="javascript:onClick(this)" /> 

Pero quiero enganchar en el evento de clic, por ejemplo, la entrada anterior, pero sin tener que utilizar la propiedad onClick dentro de sus HTML. Además, me gustaría mantener su implementación independiente, usando JavaScript sin procesar y no los marcos como jQuery o MooTools (aunque, si desea proporcionarlos como ilustraciones junto con el JavaScript en bruto también sería bueno).

<input type="text" name="text" /> 

Answer 1

Para trabajar con JavaScript, en primer lugar, hay que añadir un id al elemento que desea añadir un evento. Eso es porque facilita la comprensión de su código y evita confusiones cuando escribe el código. Así, la línea de HTML se verá así:

<input type="text" name="text" id="myInputType1" /> 

No debe haber más de un ID por elemento que es única en todo el documento. Ahora, hay tres formas principales de agregar eventos:

/* First */ 
document.getElementById("myInputType1").onclick = function(){ 
    /*Your code goes here */ 
}; 

/* Second */ 
function Func(){ 
    /*Your code goes here */ 
} 
document.getElementById("myInputType1").onclick = Func; 

/* Third */ 
function Func(){ 
    /*Your code goes here */ 
} 
document.getElementById("myInputType1").addEventListener("click", Func, false); 

La ventaja de este último es que se puede añadir tantos "clic" eventos (o "mouseover", ...) como desee, y eliminarlos uno por uno también es posible. Pero no funciona con IE < 9. En su lugar, usted tiene que utilizar:

document.getElementById("myInputType1").attachEvent("onclick", Func); 

jQuery manera:

$("#myInputType1").click(function(){ 
    /*Your code goes here */ 
}); 

Answer 2

asignando un ID a su elemento de entrada, usted fácilmente (y eficiente) ser capaz de acceder a él con javascript prima

<input type="text" name="text" id="myInput" /> 

En su javascript separada:

var input = document.getElementById("myInput"); 

input.onclick = function() {alert("clicked");} 

Obviamente, haría algo más útil que una alerta en la función onclick ...

Answer 3

Si indica su elemento y el ID, que puede hacer:

var el = document.getElementById("text"); 
el.addEventListener("click", function(/*put code here*/) {}, false);