Un ejemplo rápido del uso de eventos en JavaScript para poder mostrar mensajes de alerta personalizados en función de determinados factores. Usaremos algunos selectores para filtrar los objetos de una página HTML.
- Uso de addEventListener para mostrar alerta si se hace clic en el primer objeto p del HTML.
- Uso de querySelectorAll para mostrar alerta si se hace clic en cualquier objeto p del HTML.
- Uso de querySelectorAll para mostrar alerta si se hace clic en un objeto p de una clase concreta HTML.
Uso de addEventListener para mostrar alerta si se hace clic en el primer objeto p del HTML
Un ejemplo de código JavaScript para mostrar un mensaje al usuario, sólo si ha hecho clic en el texto correspondiente al primer objeto p (<p>) de la página HTML. En este caso usaremos el selector addEventListener:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Función que muestra un cuadro de diálogo function mostrarAlerta(texto) { alert(texto); } //Función que al recibir un clic en el primer objeto p llama a la función "mostrarAlerta" function hacerClicPrimerP() { var elemento = document.getElementsByTagName('p')[0]; var mensaje = 'Hizo clic en el primer objeto p de la página HTML.'; elemento.addEventListener('click', function(){ mostrarAlerta(mensaje); }, false); } //Al cargar la web, llama a la función que se quiera probar de las anteriores window.addEventListener('load', hacerClicPrimerP, false); |
Para usar el código JavaScript anterior, guardaremos el código en un fichero llamado funciones.js, en la carpeta script, dentro de la carpeta del raíz de nuestro sitio web:
Para probarlo, crearemos un fichero HTML, con nombre index.html, en el raíz de nuestro sitio web, con el siguiente código HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pruebas de captura de eventos con JavaScript</title> <script src="script/funciones.js"></script> </head> <body> <div id="principal"> <p> Esto es una prueba de eventos en JavaScript.</p> <p> Haga clic con el cursor del ratón en alguna zona de la ventana para comprobar que funciona la captura de eventos JavaScript.</p> </div> <div id="secundario"> <p> Esta parte tiene como nombre de clase "Secundario", aquí no funcionará el clic.</p> <p> Más información en <a href="https://proyectoa.com">ProyectoA</a></p> </div> </body> </html> |
Si probamos el resultado, abriendo el index.html, sólo se mostrará la alerta si se hace clic con el ratón en el primer párrafo:
En este caso realizamos la comprobación del código en un navegador Mozilla Firefox, mostrándose:
Uso de querySelectorAll para mostrar alerta si se hace clic en cualquier objeto p del HTML
Otro ejemplo, en este caso usaremos document.querySelectorAll para filtrar todos los objetos de tipo p de la página web actual. Con ello haremos un bucle que recorra todos los objetos p y les agregue, en el evento onClick, la ejecución de la función mostrarAlerta():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Función que muestra un cuadro de diálogo function mostrarAlerta(texto) { alert(texto); } //Función que al recibir un clic en todos los objetos p llama a la función "mostrarAlerta" function hacerClicTodosP() { var listaP = document.querySelectorAll("p"); var mensaje = 'Hizo clic en un objeto p de la página HTML.'; for(var i = 0; i < listaP.length; i++) { listaP[i].onclick = function(){ mostrarAlerta(mensaje); }; } } //Al cargar la web, llama a la función que se quiera probar de las anteriores window.addEventListener('load', hacerClicTodosP, false); |
Guardaremos el código anterior en el fichero funciones.js, igual que hicimos para el caso anterior, en la subcarpeta script. Para probar el código JavaScript repetiremos el proceso anterior, con el mismo código HTML, dado que hemos respetado el nombre del fichero JavaScript y la subcarpeta.
En este ejemplo, mostrará la alerta, el cuadro de diálogo, el mensaje, indiferentemente de en qué párrafo hagamos clic. En este caso realizamos la comprobación del código en un navegador Google Chrome, mostrándose:
Uso de querySelectorAll para mostrar alerta si se hace clic en un objeto p de una clase concreta HTML
Otro ejemplo más de la captura de eventos con JavaScript, sobre HTML. En este caso usamos el mismo selector que en el caso anterior, document.querySelectorAll, pero pasándole como, además del objeto a filtrar, también su clase, de forma que solo se agregará la función mostrarAlerta al evento OnClick de los objetos p contenidos en la clase #principal:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Función que muestra un cuadro de diálogo function mostrarAlerta(texto) { alert(texto); } //Función que al recibir un clic en todos los objetos p de la clase #principal llama a la función "mostrarAlerta" function hacerClicTodosPPrincipal() { var listaP = document.querySelectorAll("#principal p"); var mensaje = 'Hizo clic en un objeto p de la página HTML, de la clase principal.'; for(var i = 0; i < listaP.length; i++) { listaP[i].onclick = function(){ mostrarAlerta (mensaje); }; } } //Al cargar la web, llama a la función que se quiera probar de las anteriores window.addEventListener('load', hacerClicTodosPPrincipal, false); |
En este caso, el código HTML incluirá una sección con div con la clase principal y otra con la clase secundario (el código HTML es el mismo que para los casos anteriores):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pruebas de captura de eventos con JavaScript</title> <script src="script/funciones.js"></script> </head> <body> <div id="principal"> <p> Esto es una prueba de eventos en JavaScript.</p> <p> Haga clic con el cursor del ratón en alguna zona de la ventana para comprobar que funciona la captura de eventos JavaScript.</p> </div> <div id="secundario"> <p> Esta parte tiene como nombre de clase "Secundario", aquí no funcionará el clic.</p> <p> Más información en <a href="https://proyectoa.com">ProyectoA</a></p> </div> </body> </html> |
Copiando el código JavaScript al fichero funciones.js, como siempre, y el HTML al fichero index.html podremos probar el resultado. En este caso realizamos la comprobación del código en un navegador Opera, mostrándose:
En este caso, sólo se mostrará la alerta si se hace clic en uno de los dos primeros párrafos, que corresponden a la sección div de la clase principal.
