class にイベントリスナーをセット
ここでは、複数ある class 属性のオブジェクトにイベントリスナーをセットし、イベントが発生した場合、イベントが発生したオブジェクトを特定する方法を示します。
id 属性をもつオブジェクトは、document.getElementById() を使って、簡単に指定することができます。ところが、class 属性を持つオブジェクトは複数あることが前提になりますので特定することができません。getElementByClassName という関数もあるようですが、ブラウザによって対応がさまざまなようです。そこで、次のようなサンプルを作りました。
class にイベントリスナーをセットするサンプル
サンプルでは、dom1 と dom2 という文字に class 属性を設定しています。文字の上にマウスを乗せてみてください。マウスを乗せた文字の色が変わります。
サンプル： class にイベントリスナーをセット
サンプルのソースコード
js_dom_classname.html では、JavaScript の外部ファイルを読み込むコード以外のJavaScript 記述はありません。イベントリスナーをセットしたいタグには、class='dom' を記述してあります。
js_dom_classname.html のソースコード
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js_dom_classname.js"></script>
<title>JavaScript DOM class のイベントテスト</title>
</head>
<body>
JavaScript DOM class のイベントテスト<br>
<br>
class にイベントハンドラーをセットし、<br>
イベントの発生したら class を特定して文字の色を変えます。<br>
<br>
<br>
<span class='dom'>dom1</span> の色を変えます<br>
↑ マウスオーバー<br>
<br>
<span class='dom'>dom2</span> の文字を変えます<br>
↑ マウスオーバー<br>
</body>
</html>
js_dom_classname.js は、イベントリスナーとイベントが発生したときの動作を定義しています。
window.onload = function(){････ で、イベントリスナーをセットしています。まず、document.getElementsByTagName("*") で、全てのタグを抜き出します。次に、抜き出されたタグから、tags[i].className==selecttags （selecttags には、class 名 "dom" が代入されている）で、class 名 "dom" のオブジェクトを抜き出します。最後に、抜き出されたオブジェクトに、イベントハンドラーを設定していきます。これで、イベントリスナーのセットができました。
f_dom(e) は、イベントが発生したときの動作です。e ( IE では event )で、発生したイベントをチェックし、イベントが発生したオブジェクトのスタイルを this.style.color で変更しています。
js_dom_classname.js のソースコード
function f_dom(e) {
//dom がマウスオーバーされたら色を変更
if(!e) e = event;//for Windows
if ( e.type == "mouseover"){
// イベントが mouseover のとき
this.style.color="red";
} else {
// イベントが mouseover 以外のとき
this.style.color="black";
}
}
//ページが読み込まれたらイベントをセットする
window.onload = function(){
// 全てのタグを探す
var tags = document.getElementsByTagName("*");
// 抜き出すタグを入れるオブジェクトを定義
var obj=new Object();
obj.length=0;
// 抜き出すタグ名
var selecttags = "dom";
// 抜き出すタグ名に一致した class を探す
for(var i=0,L=tags.length;i<L;i++){
if(tags[i].className==selecttags){
obj[obj.length]=tags[i];
obj.length++;
}
}
// 抜きだした class にイベントハンドラーセット
for(i=0,L=obj.length;i<L;i++){
obj[i].onmouseover=f_dom;
obj[i].onmouseout=f_dom;
}
}
