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}`