Who Caught Me? : The JavaScript techniques which do and don't work (for IE, Windows) in finding out which object caught a bubbled event.

Summary

In client-side JavaScript, if you want to refer to the object who caught a bubbled event in an event-handling function, the following techniques all work...

<div id="foo" onclick="alert(this.outerHTML)"><b>This bold</b> won't interfere.</div>
<div id="foo"><b>This bold</b> won't interfere.</div>
...
foo.onclick=SayMyName;
foo.onclick=function(){SayTheNameOf(this)});
foo.onclick=function(){SayTheNameOf(foo)});
foo.attachEvent('onclick',function(){SayTheNameOf(foo)});
...
function SayMyName(){ alert(this.outerHTML) }
function SayTheNameOf(obj){ alert(obj.outerHTML) }

...but the following two do not work:

foo.attachEvent('onclick',SayMyName);
foo.attachEvent('onclick',function(){SayTheNameOf(this)});

Details

When event bubbling filters a user's action through various superfluous layers, I often want to know which object caught the event (as opposed to which top-level element got in the way). For example, suppose I want to be able to drag a particular <div> around:

<div onmousedown="StartDragging()">
	It is <b>easy to drag</b> with the mouse.
</div>
...
function StartDragging(){
	var objectToDrag=event.srcElement;
	alert("I'm going to drag:\n"+objectToDrag.outerHTML);
	...
}

The above doesn't work, because event.srcElement refers to the <b> tag if I click on the words "easy to drag". (Try clicking for yourself.) The correct way to fix this is:

<div onmousedown="StartDraggingObject(this)">
	It is <b>easy to drag</b> with the mouse.
</div>
...
function StartDraggingObject(objectToDrag){
	alert("I'm going to drag:\n"+objectToDrag.outerHTML);
	...
}

Frequently I want to be able to attach an event handler programmatically (e.g. when I don't have control over the source HTML):

<div class="draggable" id="attachsimplefunction">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachsimplefunction)
</div>
<div class="draggable" id="attachpassingthis">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachpassingthis)
</div>
<div class="draggable" id="attachpassingobject">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachpassingobject)
</div>
...
attachsimplefunction.onmousedown=StartDraggingThis;
attachpassingthis.onmousedown=function(){ StartDraggingObject(this) };
attachpassingobject.onmousedown=function(){ StartDraggingObject(attachpassingobject) };
function StartDraggingThis(){
	var objectToDrag=this;
	alert("I'm going to drag:\n"+objectToDrag.outerHTML);
	...
}

However, often I want to use the .attachEvent() method, to ensure I don't run over any existing handlers.
Only one of the below works (creating an anonymous function and passing the object to it):

<div class="draggable" id="attachsimplefunction2">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachsimplefunction2)
</div>
<div class="draggable" id="attachpassingthis2">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachpassingthis2)
</div>
<div class="draggable" id="attachpassingobject2">
	It is <b>easy to drag</b> with the mouse.<br>
	(attachpassingobject2)
</div>
...
attachsimplefunction2.attachEvent('onmousedown',StartDraggingThis);
attachpassingthis2.attachEvent('onmousedown',function(){ StartDraggingObject(this) });
attachpassingobject2.attachEvent('onmousedown',function(){ StartDraggingObject(attachpassingobject2) });