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

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:

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:

Uso de addEventListener para mostrar alerta si se hace clic en el primer objeto p del HTML

Para probarlo, crearemos un fichero HTML, con nombre index.html, en el raíz de nuestro sitio web, con el siguiente código 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:

Uso de addEventListener para mostrar alerta si se hace clic en el primer objeto p del HTML

En este caso realizamos la comprobación del código en un navegador Mozilla Firefox, mostrándose:

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

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():

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 cualquier objeto p del HTML

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:

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):

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:

Uso de querySelectorAll para mostrar alerta si se hace clic en un objeto p de una clase concreta HTML

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.