title: How do I know which element was clicked?
body: <p>I'm attempting the surprisingly difficult task of finding out which element was clicked. I have these functions from Head First AJAX:</p>
  
  <pre><code>function getActivatedObject(e) {
    var obj;
    if (!e) {
      obj = window.event.srcElement;
    } else if (e.srcElement) {
      obj = e.srcElement;
    } else {
      obj = e.target;
    }
    return obj;
  }
  
  function addEventHandler(obj, eventName, handler) {
    if (document.attachEvent) {
      obj.attachEvent("on" + eventName, handler);
    } else if (document.addEventListener) {
      obj.addEventListener(eventName, handler, false);
    }
  }
  </code></pre>
  
  <p>And my code:</p>
  
  <pre><code>mainPane = document.getElementById("mainDiv");
  contactPane = document.getElementById("contactDiv");
  addEventHandler(mainPane, "click", openFunction);
  addEventHandler(contactPane, "click", openFunction);
  
  function openFunction(e) {
    var me = getActivatedObject(e);
    //Some other stuff
  }
  </code></pre>
  
  <p>Unfortunately, the me variable sometimes refers to the div, but it sometimes refers to the image inside the div. Even though the image has no onclick function or any other kind of event! So how can I get the div that triggered the event?</p>