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
- Acoplamiento de eventos
- Diferencias entre metodologías para acoplar eventos
Glosario de eventos básicos a memorizar
[icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onclick, se activa con el click del ratón sobre un elemento.»][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onchange, se activa cuando un elemento es modificado.»][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onmouseover, se activa cuando el ratón sale por encima. «][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.»][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onkeyup, se activa cuando el usuario suelta la tecla.»][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onload, uno de mis favoritos. Se activa tras haberse cargado todo el documento web.»][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»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.[vc_custom_heading text=»Como javascript en línea en un atributo de una etiqueta html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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.[vc_custom_heading text=»Como una función en un atributo de una etiqueta html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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.[vc_custom_heading text=»Modificando el DOM al cargar el documento. setAttribute() o como evento-atributo html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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;
}[vc_custom_heading text=»Modificando el DOM al cargar el documento. addEventListener()» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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:[icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onclick, pasamos a escribir click» title_color=»#000000″][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onchange, pasamos a escribir change» title_color=»#000000″][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onmouseover, pasamos a escribir mouseover» title_color=»#000000″][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onmouseout, se activa cuando el ratón se desplaza de dentro hacia fuera de un elemento.» title_color=»#000000″][icon_list_item icon=»fa-arrow-right» icon_type=»transparent» title=»onload, pasamos a escribir load» title_color=»#000000″]
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.
Y hasta aquí una entrada extensa en la que hemos repasado muchos conceptos importantes del DOM pero que a la vez ha sido bastante resumida.
Espero que os pueda ser de utilidad.
¡Hasta mañana!
Deja una respuesta