[Javascript] event handlers

Sat Sep 16 12:56:40 CDT 2006

Hi list,

I'm very surprised on how browsers behaves with events on nested  
elements.

Only Opera (9.01) sounds to follow the DOM 2.

I tried Firefox 1.5.0.7 , Camino 1.0.2 , Safari 2.0.4.

Any comments ?

Bernard

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1- 
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
	<title>Test</title>
	<script type="text/javascript">
<!--
var res;
var stopPropagation;
var preventDefault;
function setEvent( s ){
	if ( s == "oneveq" ) {
		document.getElementById("cb2").onclick = doSomeThing;
		document.getElementById("cb").onclick = onclick;
		document.getElementById("cb").onmousedown = onmousedown;
		document.getElementById("cb").onmouseup = onmouseup;
	}
	if( s == "addevtrue" ) {
		document.getElementById("cb2").addEventListener ( "click" ,  
doSomeThing , true ) ;
		document.getElementById("cb").addEventListener ( "click" ,  
onclick , true ) ;
		document.getElementById("cb").addEventListener ( "mousedown" ,  
onmousedown , true ) ;
		document.getElementById("cb").addEventListener ( "mouseup" ,  
onmouseup , true ) ;
	}
	if( s == "addevfalse" ) {
		document.getElementById("cb2").addEventListener ( "click" ,  
doSomeThing , false ) ;
		document.getElementById("cb").addEventListener ( "click" ,  
onclick , false ) ;
		document.getElementById("cb").addEventListener ( "mousedown" ,  
onmousedown , false ) ;
		document.getElementById("cb").addEventListener ( "mouseup" ,  
onmouseup , false ) ;
	}
	res=document.getElementById("res");
}

function onclick( e ) {
	res.innerHTML +="   cb click;";
	if ( e && stopPropagation ) e.stopPropagation();
	if ( e && preventDefault ) e.preventDefault();
}
function onmousedown( e ) {
	res.innerHTML +="   cb down;";
	if ( e && stopPropagation ) e.stopPropagation();
	if ( e && preventDefault ) e.preventDefault();
}
function onmouseup( e ) {
	res.innerHTML +="   cb up;";
	if ( e && stopPropagation ) e.stopPropagation();
	if ( e && preventDefault ) e.preventDefault();
}

function doSomeThing( e ){
	res.innerHTML+="   cb2 click;";
	if ( e && stopPropagation ) e.stopPropagation();
	if ( e && preventDefault ) e.preventDefault();
}
-->
</script>
</head>
<body>
<form>
	choose model : <br/>
	<input type="radio" name="radio" onclick="setEvent('oneveq')"/ 
 >elem.onev=f<br/>
	<input type="radio" name="radio" onclick="setEvent('addevtrue')"/ 
 >elem.addEventListener ( eventype , f , true)<br/>
	<input type="radio" name="radio" onclick="setEvent('addevfalse')"/ 
 >elem.addEventListener ( eventype , f , false)<br/>
	stopPropagation = <span>false</span><input type="checkbox"  
onclick="stopPropagation=this.checked ? true : false ;  
this.previousSibling.innerHTML = stopPropagation;"/><br/>
	preventDefault = <span>false</span><input type="checkbox"  
onclick="preventDefault=this.checked ? true : false ;  
this.previousSibling.innerHTML = preventDefault;"/>
	<div id="cb" style="width: 150px ; height : 50px ; background- 
color : #ccc ; ">
		<input id="cb2" type="checkbox"/><span></span>	
		test on this box
	</div>
	<div id="res">event history=</div><input type="reset"  
onclick="res.innerHTML='event history='; "/>
</form>
</body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060916/0ca74dd0/attachment.htm>