Conceptos de DHTML

Cuando tenemos varios objetos que generan eventos y todos se asocian con una única función podemos pasar en la llamada a la función la referencia del objeto que emite el evento, esto mediante la palabra clave this.

Veamos con un ejemplo su funcionamiento. Dispondremos dos botones que al ser presionados llaman a una misma función.

Mostraremos algunas de las propiedades de los objetos que emitieron el 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" onclick="mostrarAtributos(this)">
    <br>
    <input type="button" name="boton2" value="boton 2" id="b2" onclick="mostrarAtributos(this)">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function mostrarAtributos(objeto) {
    let ref = document.getElementById('titulo')
    ref.innerText = `Name: ${objeto.name} Id: ${objeto.id} Value: ${objeto.value}`
}

La forma de inicializar la propiedad onclick ahora es:

onclick="mostrarAtributos(this)"

En la función mostrarAtributos primero obtenemos la referencia al párrafo donde mostraremos los datos:

    let ref = document.getElementById('titulo')

Y luego mostramos la información sobre las propiedades del objeto que generó el evento:

    ref.innerText = `Name: ${objeto.name} Id: ${objeto.id} Value: ${objeto.value}`

26 - Referencia del objeto que generó el evento (this)

Retornar