34 - Evento click (DOM)


En este nuevo modelo tenemos un método fundamental llamado:

addEventListener

Este método lo tienen incorporado casi todos los objetos del DOM (recordemos nuestro árbol)
Para llamarlo debemos hacerla a partir de la referencia de un objeto y pasarle como mínimo dos parámetros:

-El nombre del evento que queremos capturar (click, load, change etc.)
-El nombre de la función que se dispara cuando se produce el evento, o directamente la implementación de la función.

Para ver como capturamos el evento click con este nuevo modelo, confeccionaremos un programa que muestre dos botones y luego al ser presionado aparezca un alert con la etiqueta del botón presionado.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <input type="button" value="Botón 1" id="b1">
    <input type="button" value="Botón 2" id="b2">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let boton1 = document.getElementById('b1')
boton1.addEventListener('click', () => {
    let boton1 = document.getElementById('b1')
    alert(boton1.getAttribute('value'))
})
let boton2 = document.getElementById('b2')
boton2.addEventListener('click', () => {
    let boton2 = document.getElementById('b2')
    alert(boton2.getAttribute('value'))
})

Lo primero que podemos observar es que no hay ninguna llamada a funciones JavaScript en el archivo HTML, solo incluimos el archivo funciones.js (es de suma importancia que se encuentre previo a la marca de cerrado del body para que cuando se cargue el programa JavaScript el DOM de la página esté creado):

        <script src="funciones.js"></script>
    </body>

Lo más importante está ahora ubicado en el archivo funciones.js, lo primero que hacemos es obtener la referencia del boton1 y mediante dicha referencia llamamos al método addEventListener:

let boton1 = document.getElementById('b1')
boton1.addEventListener('click', () => {
    let boton1 = document.getElementById('b1')
    alert(boton1.getAttribute('value'))
})

Le pasamos como primer parámetro la referencia el evento que queremos capturar ('click'), debe ir entre comillas y el segundo parámetro es la función que debe ejecutarse cuando se dispare el evento 'click'.

El segundo parámetro del método addEventListener es la función que se ejecutará cuando dicho botón sea presionado.

Actualmente lo más común es pasar una función flecha (arrow function), pero podemos utilizar otras formas de indicar dicha función.

Otras técnicas de indicar la función que se pasa a addEventListener

  1. Podemos pasar la referencia a una función, y no su implementación:

    let boton1 = document.getElementById('b1')
boton1.addEventListener('click', presionBoton1)
let boton2 = document.getElementById('b2')
boton2.addEventListener('click', presionBoton2)

function presionBoton1() {
    let boton1 = document.getElementById('b1')
    alert(boton1.getAttribute('value'))
}

function presionBoton2() {
    let boton1 = document.getElementById('b2')
    alert(boton2.getAttribute('value'))
}

    Es muy importante notar que el segundo parámetro que se pasa al método addEventListener es el nombre de la función SIN PARENTESIS, tengamos en cuenta que no se está llamado la función, sino se le pasa la referencia a la función para que en el momento apropiado cuando el botón sea presionado sea llamada.

  2. También podemos implementar una función anónima con la sintaxis más antigua:

    let boton1 = document.getElementById('b1')
boton1.addEventListener('click', function() {
    let boton1 = document.getElementById('b1')
    alert(boton1.getAttribute('value'))
})
let boton2 = document.getElementById('b2')
boton2.addEventListener('click', function() {
    let boton2 = document.getElementById('b2')
    alert(boton2.getAttribute('value'))
})

    Como vemos utilizamos la palabra clave function seguida entre paréntesis de los parámetros si los tiene.

Cualquiera de estas tres técnicas nos permiten indicar la función que se ejecutará cuando ocurra el evento.

Acotaciones

A medida que nos vamos sintiendo más cómodo con JavaScript y el acceso al DOM, podemos crear un código más conciso, evitando definir variables auxiliares:

document.getElementById('b1').addEventListener('click', () => {
    alert(document.getElementById('b1').getAttribute('value'))
})
document.getElementById('b2').addEventListener('click', () => {
    alert(document.getElementById('b2').getAttribute('value'))
})

Retornar