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>
selectタグにイベント処理を記述したHTML
<select id="sel" name="sel" onmouseover="t.value='on mouse over SELECT FILED.';" onmouseout="t.value='';">