36 - Referencia del objeto que generó el evento (DOM)


La función que se dispara al producirse el evento recibe un parámetro con información referente a ese evento.

Veamos un ejemplo como enlazar dos botones con la misma función y luego en esta rescatar información sobre cual fue el emisor del evento.

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>
    <h1 id="titulo">Datos del objeto que emite el evento.</h1>
    <input type="button" name="boton1" value="boton 1" id="b1">
    <input type="button" name="boton2" value="boton 2" id="b2">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

document.getElementById('b1').addEventListener('click', presionBoton)
document.getElementById('b2').addEventListener('click', presionBoton)

function presionBoton(e) {
    let boton = e.target
    document.getElementById('titulo').innerText = `'Name:' ${boton.name} 'Id:'  ${boton.id} 'Value:' ${boton.value}`
}

Lo primero que hacemos es obtener la referencia de los dos botones y llamar al método addEventListener:

document.getElementById('b1').addEventListener('click', presionBoton)
document.getElementById('b2').addEventListener('click', presionBoton)

Como vemos le pasamos la misma función 'presionBoton' y no implementamos una función anónima para cada llamada.

Ahora veamos como obtener información sobre el evento que se a disparado en la función presionBoton:

function presionBoton(e) {
    let boton = e.target
    document.getElementById('titulo').innerText = `'Name:' ${boton.name} 'Id:'  ${boton.id} 'Value:' ${boton.value}`
}

La función recibe un parámetro con detalles del evento, entre otros:

target: Referencia del objeto que generó el evento 
        (en nuestro problema la referencia del botón b1 o b2)
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.

En nuestro problema obtenemos la referencia del botón que generó el evento:

    let boton = e.target

Luego obtenemos la referencia de la etiqueta del título donde mostraremos los datos y le asignamos a la propiedad 'innerText' el texto a mostrar:

    document.getElementById('titulo').innerText = `'Name:' ${boton.name} 'Id:'  ${boton.id} 'Value:' ${boton.value}`

Retornar