<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos(e)
{
  var boton1=document.getElementById('b1');
  boton1.addEventListener('click',presionBoton,false);  
  var boton2=document.getElementById('b2');
  boton2.addEventListener('click',presionBoton,false);  
}

function presionBoton(e)
{
  var boton=e.target;
  var ref=document.getElementById('titulo');
  ref.firstChild.nodeValue='Name:'+boton.name+' Id:'+boton.id+' Value:'+boton.value;
}
</script>
</head>
<body> 
<h1 id="titulo">Datos del objeto que emite el evento.</h1>
<input type="button" name="boton1" value="boton 1" id="b1">
<br> 
<input type="button" name="boton2" value="boton 2" id="b2">
</body> 
</html>

Ver ejemplo anterior

El código javascript es:

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos(e)
{
  var boton1=document.getElementById('b1');
  boton1.addEventListener('click',presionBoton,false);  
  var boton2=document.getElementById('b2');
  boton2.addEventListener('click',presionBoton,false);  
}

function presionBoton(e)
{
  var boton=e.target;
  var ref=document.getElementById('titulo');
  ref.firstChild.nodeValue='Name:'+boton.name+' Id:'+boton.id+' Value:'+boton.value;
}

Como siempre inicializaremos el evento load del objeto window con una función que se encarga de configurar los eventos a los distintos objetos de la página (es importante notar que esta inicialización se hace fuera de cualquier función con el objetivo que se ejecute cuando se cargue la página en el navegador):

window.addEventListener('load',inicializarEventos,false);

La función inicializarEventos obtiene la referencia del elementos HTML que queremos asignarle eventos y llama a la función addEventListener:

function inicializarEventos(e)
{
  var boton1=document.getElementById('b1');
  boton1.addEventListener('click',presionBoton,false);  
  var boton2=document.getElementById('b2');
  boton2.addEventListener('click',presionBoton,false);  
}

Para este problema los dos objetos llaman a la misma función: presionBoton.
Ahora veamos como obtener información sobre el evento que se a disparado en la función presionBoton:

function presionBoton(e)
{
  var boton=e.target;
  var ref=document.getElementById('titulo');
  ref.firstChild.nodeValue='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:

  var boton=e.target;

Luego obtenemos la referencia donde mostraremos los datos:

  var ref=document.getElementById('titulo');

Por último accedemos a su nodo hijo que se trata de un nodo valor donde mostramos los datos y procedemos a asignar algunas propiedades del botón presionado:

  ref.firstChild.nodeValue='Name:'+boton.name+' Id:'+boton.id+' Value:'+boton.value;

(adsbygoogle = window.adsbygoogle || []).push({});

Referencia del objeto que generó el evento (DOM)