Demonstration of Event Targeting Oddities in Firefox 2

Each time one of the checkboxes catches a click or focus event (generated directly by a user or fired using the click() and focus() methods below) an alert box will appear showing the target of the event. The target should always the element which was targeted by the event (in the form my-radio-#). However, you'll see that the focus() and click() methods exhibit different behavior.

Code for this Example:

<form id="test-form" action="" method="get">
    <p><input type="radio" name="my-radio" id="my-radio-1" /> <label for="my-radio-1">#1</label></p>
    <p><input type="radio" name="my-radio" id="my-radio-2" /> <label for="my-radio-2">#2</label></p>
    <p><input type="radio" name="my-radio" id="my-radio-3" /> <label for="my-radio-3">#3</label></p>
    <p><input type="radio" name="my-radio" id="my-radio-4" /> <label for="my-radio-4">#4</label></p>
    
    <p id="focus-1">Focus #1</p>
    <p id="click-1">Click #1</p>
    <p id="focus-3">Focus #3</p>
    <p id="click-3">Click #3</p>
    <p id="focus-and-click-3">Focus & Click #3</p>
    <p><input type="text" name="my-text" id="my-text" /> <label for="my-radio-4">Change the text to throw an click() at the first radio button</label></p>

</form>

<script type="text/javascript">

catchClick = function(e){ alert("Caught a click with the target " + e.target.id); }
catchFocus = function(e){ alert("Caught a focus with the target " + e.target.id); }

throwFocusAtOne = function(){ document.getElementById('my-radio-1').focus(); }
throwClickAtOne = function(){ document.getElementById('my-radio-1').click(); }
throwFocusAtThree = function(){ document.getElementById('my-radio-3').focus(); }
throwClickAtThree = function(){ document.getElementById('my-radio-3').click(); }
throwFocusAndClickAtThree = function(){ 
	document.getElementById('my-radio-3').click();
	document.getElementById('my-radio-3').focus(); 
}

document.getElementById('my-radio-1').addEventListener("click", catchClick, false);
document.getElementById('my-radio-2').addEventListener("click", catchClick, false);
document.getElementById('my-radio-3').addEventListener("click", catchClick, false);
document.getElementById('my-radio-4').addEventListener("click", catchClick, false);

document.getElementById('my-radio-1').addEventListener("focus", catchFocus, false);
document.getElementById('my-radio-2').addEventListener("focus", catchFocus, false);
document.getElementById('my-radio-3').addEventListener("focus", catchFocus, false);
document.getElementById('my-radio-4').addEventListener("focus", catchFocus, false);

document.getElementById('focus-1').addEventListener("click", throwFocusAtOne, false);
document.getElementById('click-1').addEventListener("click", throwClickAtOne, false);
document.getElementById('focus-3').addEventListener("click", throwFocusAtThree, false);
document.getElementById('click-3').addEventListener("click", throwClickAtThree, false);
document.getElementById('focus-and-click-3').addEventListener("click", throwFocusAndClickAtThree, false);
document.getElementById('my-text').addEventListener("keydown", throwClickAtOne, false);

</script>