La antigua manera de hacerlo era a través de atributos en los elementos del DOM:
Código HTML:
Ver original
<select id = "combo" onchange = "funcion2()">
<input type = "text" id = "caja" onkeypress = "funcion3()" />
Y en el documento JavaScript, definías las funciones:
Código Javascript
:
Ver originalfunction funcion1(){
alert("Este es un botón");
}
function funcion2(){
alert("Este es un combo");
}
function funcion3(){
alert("Esta es una caja de texto");
}
Sin embargo, la
W3C recomienda hacer esto únicamente desde el código JavaScript. Aplicando esto al ejemplo anterior, quedaría así:
Código Javascript
:
Ver originalvar boton = document.getElementById("boton"),
combo = document.getElementById("combo"),
caja = document.getElementById("caja");
// FORMA 1
boton.addEventListener("click", function(){
alert("Este es un botón");
}, false);
combo.addEventListener("change", function(){
alert("Este es un combo");
}, false);
caja.addEventListener("keypress", function(){
alert("Esta es una caja de texto");
}, false);
// FORMA 2
function funcion1(){
alert("Este es un botón");
}
function funcion2(){
alert("Este es un combo");
}
function funcion3(){
alert("Esta es una caja de texto");
}
boton.addEventListener("click", funcion1, false);
combo.addEventListener("change", funcion2, false);
caja.addEventListener("keypress", funcion3, false);
Como verás, en la forma recomendada, retiré los atributos de eventos de los elementos del DOM, los tomé desde el código JavaScript y les asigné los respectivos eventos, que ejecutarán determinadas funciones por cada vez que se produzcan.
Saludos