Ejemplos útiles

En esta página se muestran ejemplos del uso de eventos en JavaScript

Eventos en elementos HTML

La página tiene un evento onunload cuando se salga de la misma. Mira la consola.

Ejemplo con evento `onclick` con código JavaScript

<script>

var veces=1;

<button onclick="this.innerHTML='Me has pulsado '+veces;veces++;">Púlsame</button>

Ejemplo con evento `onclick` en un elemento padre

Abra la consola y haga click en los elementos del div 1

Div 1

Div 2

Ejemplo con evento `onmouseover` y `onmouseout` llamando a una función

<script>

function opacidad(elemento){
    elemento.style.opacity=1;      
}
function transparente(elemento){
    elemento.style.opacity=0.5;
    alert("Has salido");
}

Añadiendo un evento a un elemento HTML que no lo tenía

<script>

function segundo(){
    let boton = document.getElementById("primero");
    boton.onclick=hola;

}
function hola(){
    alert("Ahora ya si hago algo");
}

Pulsa el primer botón antes de darle al segundo, luego pulsa el segundo y de nuevo el primero.

Añadiendo un evento a un elemento HTML con `addEventListener()`

<script>

function maseventos(tipo) {
    let boton = document.getElementById("otroprimero");
    switch (parseInt(tipo)) {
        case 1:
            boton.addEventListener("click", evento1);
            break;
        case 2:
            boton.addEventListener("click", evento2);
            break;
        case 3:
            boton.addEventListener("dblclick", evento3);
            break;
        default:
            boton.addEventListener("mouseup", evento4);
            break;

    }
}
function evento1() {

    console.log("CLICK. Ahora me has pulsado");
}
function evento2() {

    console.log("CLICK.¡Vaya, ahora también me has pulsado!");
}
function evento3() {

    console.log("DOBLECLICK. ¡Qué suerte!");
}
function evento4() {
    console.log("MOUSEUP" + "Soltaste el botón, que lo sé");
}

Abre la consola y pulsa el primer botón antes de darle al segundo

Con addEventListener() se pueden añadir varios eventos, incluso del mismo tipo sin reemplazar los existentes.

Eliminar eventos de un elemento HTML con `removeEventListener()`

<script>

                        
function limpia(elemento) {
    elemento.removeEventListener("click", evento1);
    elemento.removeEventListener("click", evento2);
    elemento.removeEventListener("dblclick", evento3);
    elemento.removeEventListener("mouseup", evento4);
}

Con removeEventListener() se eliminan los eventos existentes.

Emplear el objeto `Event`

<script>

onclick="return unEvento(event);"

 let imagen = document.getElementById("imagen1");
imagen.addEventListener("click", unEvento);
function unEvento(evento) {
    console.log("Evento generado:" + evento.type);
    evento.target.style.border = "2px solid red";
}

Toda función que responde a un evento recibe un objeto Event que usamos declarando un parámetro.

Pulsa sobre la imagen para poner un marco cada vez más grueso.

Capturar un evento

<script>

function article(evento) {
    console.log("Evento " + evento.type + " en un elemento " + evento.target.nodeName + " fase=" + evento.eventPhase);             
}
function nollega(evento) {
    console.log("Paro el evento"+ evento.type + " en un elemento " + evento.target.nodeName + " fase=" + evento.eventPhase);
    evento.stopPropagation();
}
function sillega(evento) {
    console.log("No paro el evento"+ evento.type + " en un elemento " + evento.target.nodeName + " fase=" + evento.eventPhase);
}

Se ha definido un evento onclick en el elemento <article> que muestra un mensaje si se hace click en cualquier parte de su contenido porque el evento se propaga de vuelta.

Sin embargo si se hace click botón 1 el <article> no recibe en evento, en el botón 2 sí se propaga.

Abre la consola

Prevenir un evento habitual

<script>

function nonavega(){
   event.preventDefault();
   alert("adios");
   console.log("No navega");
}

Se ha añadido un evento onclick al enlace y se ha evitado que funcione con event.preventDefault()

Abre la consola y pulsa sobre el enlace

www.ujaen.es

Inicio

Eventos en elementos HTML

Ejemplo con evento onclick con código JavaScript

Ejemplo con evento onclick en un elemento padre

Div 1

Div 2

Ejemplo con evento onmouseover y onmouseout llamando a una función

Añadiendo un evento a un elemento HTML que no lo tenía

Añadiendo un evento a un elemento HTML con addEventListener()

Eliminar eventos de un elemento HTML con removeEventListener()

Emplear el objeto Event

Capturar un evento

Prevenir un evento habitual

Ejemplo con evento `onclick` con código JavaScript

Ejemplo con evento `onclick` en un elemento padre

Ejemplo con evento `onmouseover` y `onmouseout` llamando a una función

Añadiendo un evento a un elemento HTML con `addEventListener()`

Eliminar eventos de un elemento HTML con `removeEventListener()`

Emplear el objeto `Event`