Listado completo de tutoriales

Parámetro del método asociado al addEventListener.

Hasta ahora siempre hemos asociado una función distinta para procesar los eventos de distintos elementos HTML. Pero veremos que está permitido asociar una único función a varios eventos de distintos objetos.

Debemos definir un parámetro en la función a implementar que llega la referencia del objeto que emitió el evento.

Implementaremos un panel con un conjunto de botones que nos permitan ingresar un valor numérico presionando botones.
Asociaremos el click de cada botón con una única función.


<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
    <style>
        .boton {
            width: 50px;
            height: 50px;
        }
        
        #resultado {
            font-size: 40px;
        }
    </style>
</head>

<body>

    <input type="button" id="boton0" name="boton0" value="0" class="boton">
    <input type="button" id="boton1" name="boton1" value="1" class="boton">
    <input type="button" id="boton2" name="boton2" value="2" class="boton">
    <input type="button" id="boton3" name="boton3" value="3" class="boton">
    <input type="button" id="boton4" name="boton4" value="4" class="boton">
    <input type="button" id="boton5" name="boton5" value="5" class="boton">
    <input type="button" id="boton6" name="boton6" value="6" class="boton">
    <input type="button" id="boton7" name="boton7" value="7" class="boton">
    <input type="button" id="boton8" name="boton8" value="8" class="boton">
    <input type="button" id="boton9" name="boton9" value="9" class="boton">
    <br>
    <div id="resultado"></div>

    <script>
        for (let x = 0; x <= 9; x++) {
            document.getElementById('boton' + x).addEventListener('click', presion);
        }

        function presion(evt) {
            document.getElementById('resultado').innerHTML =
                document.getElementById('resultado').innerHTML + evt.target.value;
        }
    </script>

</body>

</html>

En el body definimos 10 botones y un div donde mostraremos todos los números ingresados.

<input type="button" id="boton0" name="boton0" value="0" class="boton">
<input type="button" id="boton1" name="boton1" value="1" class="boton">
<input type="button" id="boton2" name="boton2" value="2" class="boton">
<input type="button" id="boton3" name="boton3" value="3" class="boton">
<input type="button" id="boton4" name="boton4" value="4" class="boton">
<input type="button" id="boton5" name="boton5" value="5" class="boton">
<input type="button" id="boton6" name="boton6" value="6" class="boton">
<input type="button" id="boton7" name="boton7" value="7" class="boton">
<input type="button" id="boton8" name="boton8" value="8" class="boton">
<input type="button" id="boton9" name="boton9" value="9" class="boton">
<br>
<div id="resultado"></div>

Asociamos los diez botones con la función presion y para reducir el código disponemos un for que se repita 10 veces y llamamos en la misma al método addEventListener (debemos ir obteniendo el id del botón concatenando 'boton' y el contador del for):

        for (let x = 0; x <= 9; x++) {
            document.getElementById('boton' + x).addEventListener('click', presion);
        }

Lo nuevo aparece en la función presion:

        function presion(evt) {
            document.getElementById('resultado').innerHTML =
                document.getElementById('resultado').innerHTML + evt.target.value;
        }

La función presion tiene un parámetro llamado evt (podemos darle cualquier nombre) y el mismo es un objeto que tiene las siguientes propiedades:

target: Referencia del objeto que generó el evento (en nuestro ejemplo alguno de los 10 botones)
type: El nombre del evento (en nuestro caso click)
button: El botón del mouse presionado (0 = izquierdo, 1 = medio, 2 = derecho)
keyCode: El caracter del teclado presionado (en caso que corresponda)
shiftKey: true o false en caso de estar presionada esta tecla.

Como en este problema debemos ir concatenando el número presionado procedemos a obtener la referencia del div y asignarle el valor actual más la propiedad value del botón presionado:

            document.getElementById('resultado').innerHTML =
                document.getElementById('resultado').innerHTML + evt.target.value;

Retornar