08 May Introducción a los eventos javascript
Hoy vamos a hablar de los eventos Javascript.
El navegador web está continuamente alerta a que suceda algún tipo de activador que desencadene una instrucción. Es lo que se conoce como un evento.
Los eventos pueden ser la consecuencia de una acción de algún tipo de periférico del ordenador como el ratón o teclado, por el comportamiento del usuario por, acciones que pueda realizar el usuario a voluntad o simplemente por circunstancias ligadas a la carga de una página web.
Por ejemplo que se haya cargado todo el documento web es un evento en si.
Resumen de contenidos de esta publicación
Glosario de eventos básicos a memorizar
onclick, se activa con el click del ratón sobre un elemento.
onchange, se activa cuando un elemento es modificado.
onmouseover, se activa cuando el ratón sale por encima.
onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.
onkeyup, se activa cuando el usuario suelta la tecla.
onload, uno de mis favoritos. Se activa tras haberse cargado todo el documento web.
onsubmit, importantísimo. Evento que activa el envío de un formulario.
Acoplamiento de eventos
De modo similar que con el css los eventos se acoblan en el documento. Como atributo y como evento semántico.
Como javascript en línea en un atributo de una etiqueta html
Por ejemplo:
<button onclick = “window.alert(‘hola que tal’)”>Envía un saludo</button>
Fijaros en el ejemplo que el string se ha pasado con comillas simples pues el atributo del html lo hemos puesto con comillas dobles.
Como una función en un atributo de una etiqueta html
Por ejemplo:
<button onclick = “saludar()”>Envía un saludo</button>
Dónde saludar() sería definida en la hoja javascript como una función.
Es importante asegurarnos que el javascript del documento web se haya cargado antes de que se active el evento.
La función externa se presta al uso de una instrucción muy útil en programación que es la palabra reservada this.
Hablaré de this en un capítulo posterior. Pero para resumirlo this viene a pasar como parámetro el elemento que ha sido activado.
Modificando el DOM al cargar el documento. setAttribute() o como evento-atributo html
Los eventos semánticos nos ayudan a desvincular el máximo posible el javascript de la hoja html.
A diferencia de las 2 opciones anteriores, evitamos declarar un evento como un atributo directamente en el html y en su lugar lo hacemos desde el propio javascript dentro de la etiqueta <script> o una hoja externa llamada desde <script src=»»>
Conozco 3 formas de hacerlo (es posible que hayan más):
Ejemplo 1:
document.getElementById(«boton»).setAttribute(«onclick»,»saludar()»);
Ejemplo 2:
document.getElementById(“boton”).onclick = saludar;
En el ejemplo 2 fijaros en la ausencia del paréntesis.
Según comentado en la publicación de setInterval() no queremos la ejecución inmediata del evento cuando se lea. En su lugar lo que deseamos es que se asigne el contenido de la función. Es decir, estamos tratando la función como una variable.
Siguiendo con el ejemplo 2 es conveniente asignar a los nodos del documento web cuantos eventos necesitamos asignarles justo después del momento del momento de carga.
De lo contrario corremos el riesgo de que un elemento vea truncada su funcionalidad.
Ejemplo 2 reescrito:
window.onload = init;
function init(){
document.getElementById(“boton”).onclick = saludar;
};
Observación:
Podríamos escribir el ejemplo 3 de la siguiente forma.
window.onload = function (){
document.getElementById(“boton”).onclick = saludar;
}
Modificando el DOM al cargar el documento. addEventListener()
La instrucción addEventListener(nombreEvento,nombreFuncion) nos permiten añadir eventos a los nodos de un documento web.
Presentan la ventaja que no sobre escriben eventos que ya pudieran existir de antemano.
Este método es especialmente recomendado cuando desconocemos aquello que otro programador pudiera haber escrito antes que nosotros.
Ejemplo 1:
document.getElementById(«boton»).addEventLister(«click»,»saludar»);
Fijaros que en todos los eventos desaparece el prefijo on.
De este modo:
onclick, pasamos a escribir click
onchange, pasamos a escribir change
onmouseover, pasamos a escribir mouseover
onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.
onload, pasamos a escribir load
Diferencias entre metodologías para acoplar eventos
Cuando asociamos un evento como un atributo html:
- Es un sistema compatible con todos las versiones de explorer
- Sobre escribimos posibles eventos que pudiese haber asignados previamente
Cuando asociamos un evento mediate addEventListener()
- No es compatible para versiones anteriores a explorer 8
- Podemos añadir tantos eventos iguales como queramos asociados a un mismo nodo.
No Comments