$addHandlers - unexpected behaviour

Question

Hi there,

I am attempting to write my first ASP.NET AJAX control and have encountered some strange behaviour with the $addHandlers javascript function. Basicaly, I am dynamically creating a 'div' element and attaching a couple of event handlers to it as follows:

var pnlResults = this.get_pnlResults();

var itemDiv = document.createElement('div');
itemDiv.id = pnlResults.id + UNIQUE KEY;
//using '/_/g' replaces ALL occurrances of '_' instead of just the first one
itemDiv.name = itemDiv.id.replace(/_/g, "$");
itemDiv.innerHTML = SOME TEXT;  
                    
var itemTextDiv = document.createElement('div');
itemTextDiv.innerHTML = SOME TEXT;
itemDiv.appendChild(itemTextDiv);
                      
pnlResults.appendChild(itemDiv);
                                        
var mouseOverHandler = Function.createDelegate(this, this.onMouseOver);                
var mouseOutHandler = Function.createDelegate(this, this.onMouseOut); 
$addHandlers(itemDiv, {mouseover:mouseOverHandler,
                       mouseout:mouseOutHandler}, this);

As you can see, I am creating 'itemDiv', appending the child 'itemTextDiv' and then appending this nested pair inside 'pnlResults'. Once I have done this I attach the event handlers to 'itemDiv'. My problem is that the event handlers seem to get attached to 'itemDiv' AND its child 'itemTextDiv' causing the unwanted behaviour. Am I missing something? I would have assumed (and expected) the events only to fire for the 'itemDiv' element - the online documentation does not go into much detail.

(I have tried adding the event handlers to 'itemDiv' before I add the child element but this does not work either).

Thanks in advance for your help!