S_a_k_Uの日記みたいなDB

~サクゥーと呼ばないで~

selectタグとoptgroupタグとoptionタグとイベント処理

Windows Vista:Firefox 3.6.13、IE7
Windows XP:Firefox 3.0.20、IE6SP2
Windows 7:Firefox 3.6.13、IE8
Windows 2000:Firefox 3.0.20、IE5.5SP4(IE5.0)
Firefoxでは、上位のタグにイベント処理(onmouseover)があるとそちらを優先するみたい。
といいつつ、
・selectタグでイベント処理が設定されていない場合は、それは下位に適用されない。
・optgroupタグでイベント処理が設定されていない場合は、それは下位に適用される。
という動きになってる。
IEでは、selectタグでしか反応しないみたいだし。
但し、IE8だけ挙動が違う。IE8だけselectタグのイベント処理が、コンボリストの選択フィールドのみ反応して、リストフィールドでは反応しない。
IE5.5は、IE8に似てるけど若干挙動が違うwさらにoptgroupタグがサポートされてない。
#IE5.0に至っては、optgroupタグがサポートされてないし、selectタグでのイベント処理もサポートしてないっぽいw

Firefoxの動作を確認したHTML(selectタグのイベント処理の記述なし)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<input id="txt" name="txt" size="50" />
<br />
<select id="sel" name="sel">
	<optgroup label="numeric" onmouseover="t.value='on mouse over numeric.';" onmouseout="t.value='';">
		<option value="val_1">value 1</option>
		<option value="val_2" onmouseover="t.value='on mouse over value 2.';" onmouseout="t.value='';">value 2</option>
		<option value="val_3">value 3</option>
	</optgrou>
	<optgroup label="alphabet">
		<option value="val_a">value a</option>
		<option value="val_b onmouseover="t.value='on mouse over value b.';" onmouseout="t.value='';">value b</option>
		<option value="val_c">value c</option>
	</optgrou>
	<option value="val_x">value x</option>
	<option value="val_y" onmouseover="t.value='on mouse over value y.';" onmouseout="t.value='';">value y</option>
	<option value="val_z">value z</option>
</select>
</body>
<script type="text/javascript">
<!--
var t = window.document.getElementById("txt");
if (t == null) t = window.document.getElementByName("txt");
// -->
</script>
</html>

value 2にmouseoverしたとき

上位のoptgroupタグ(numeric)のイベントが有効なって、value 2のoptionタグの記述は無効になってる。

value 3にmouseoverしたとき

これはvalue 2のoptionタグの記述がなく、上位のoptgroupタグ(numeric)のイベントが有効になってる。

value bにmouseoverしたとき

これも上位のoptgroupタグ(alphabet)のイベントが有効に(イペント処理なし)なって、value bのoptionタグの記述は無効になってる。

value yにmouseoverしたとき

value yのoptionタグの記述が有効になってる。

selectタグにイベント処理を記述したHTML

<select id="sel" name="sel" onmouseover="t.value='on mouse over SELECT FILED.';" onmouseout="t.value='';">