Programacion de aplicaciones web parte 7

Vista previa del material en texto

PAW 2023
Programación de Aplicaciones Web - JavaScript Eventos
Javascript - Eventos
 Los eventos HTML son "cosas" que les suceden a los elementos 
HTML.
 
 Puede ser algo que hace el navegador o algo que hace un 
usuario.
 
 Ejemplos:
 Una página web terminó de cargarse.
 Se cambió un campo de entrada.
 Se hizo clic en un botón.
 
Javascript - Eventos
 JavaScript puede "reaccionar" a estos eventos, permitiendo 
ejecutar código al detectar dichos eventos.
 HTML permite agregar atributos para controlar eventos, con 
código JavaScript.
Javascript - Controlador de Eventos
Los controladores de eventos, se pueden utilizar para gestionar 
y verificar las entradas del usuario, las acciones del usuario, las 
acciones del navegador:
● Cosas que se deben hacer cada vez que se carga una página.
● Cosas que se deben realizar cuando se cierra una página.
● Acciones que se deben llevar a cabo cuando el usuario 
presiona un botón.
● Contenido que se debe verificar cuando un usuario ingresa 
datos.
Javascript - DOM Eventos
En el siguiente ejemplo se llama a una función desde el 
controlador de eventos.
Javascript - Asignar Eventos con el DOM
Asignar un evento onclick a un elemento img
Javascript - Asignar Eventos con el DOM
Asignar un evento onclick a un elemento img
Javascript - Asignar Eventos con el DOM
Asignar un evento onclick a un elemento img
Javascript - Asignar Eventos con el DOM
Asignar un evento onclick a un elemento img
Javascript - el evento onchange
El evento onchange se utiliza comúnmente en combinación con 
la validación de input fields.
Javascript - eventos onmouseover y onmouseout
Javascript - eventos onmouseover y onmouseout
Javascript - eventos onmouseover y onmouseout
Javascript - eventos onmouseover y onmouseout
Javascript - eventos onmouseover y onmouseout
Javascript - eventos onmousedown y onmouseup
Javascript - eventos onmousedown y onmouseup
Javascript - eventos onmousedown y onmouseup
Javascript - eventos onmousedown y onmouseup
Javascript - eventos onmousedown y onmouseup
Javascript - DOM EventListener
El método addEventListener() agrega un controlador de 
evento al elemento especificado.
Se pueden agregar varios controladores de eventos a un 
elemento. 
Se pueden agregar detectores de eventos a cualquier objeto 
DOM, no sólo HTML, por ejemplo el objeto window.
Al utilizar el método addEventListener(), JavaScript se 
separa del etiquetado HTML y se vuelve más legible.
Se puede eliminar un detector de eventos utilizando el método 
removeEventListener().
Notación:
Ejemplo:
Javascript - DOM EventListener
Se pueden agregar muchos controladores de eventos al mismo 
elemento.
Javascript - DOM EventListener
Se pueden agregar detectores de eventos a cualquier objeto 
DOM, no sólo HTML, por ejemplo el objeto window.
Javascript - DOM EventListener
Javascript - Burbujeo o Captura de Eventos
Existen dos formas de propagación de eventos en HTML DOM: 
burbujeo o captura.
Es una manera de definir el orden en el que se gestionan los eventos 
en elementos anidados. Por ejemplo: si tenemos un elemento <p> 
dentro de un <div>, y el usuario hace click sobre el elemento <p>, ¿cuál 
evento click se controla primero?
En el burbujeo, el evento del elemento más interno se controla 
primero.
En el modo captura, el evento del elemento más externo se controla 
primero.
El valor por defecto es falso, lo cual usará la propagación por burbujeo.
Javascript - Burbujeo o Captura de Eventos
Javascript - removeEventListener()
Elimina los controladores de eventos que se agregaron con el método addEventListener()
Bibliografía
–MDN - Mozilla Developer Network - JavaScript developer guide [en línea]
 Disponible en: <https://developer.mozilla.org/en-US/docs/Learn/Javascript>
–W3Schools Online Web Tutorials [en línea]
 Disponible en: <https://www.w3schools.com/js/js_htmldom.asp>
–FLANAGAN, David. JavaScript: The Definitive Guide. Séptima Edición. Estados 
Unidos, O’Reilly Media, Inc., 687p.
https://developer.mozilla.org/en-US/docs/Learn/Javascript
https://www.w3schools.com/js/js_htmldom.asp