class にイベントリスナーをセット

ここでは、複数ある class 属性のオブジェクトにイベントリスナーをセットし、イベントが発生した場合、イベントが発生したオブジェクトを特定する方法を示します。
id 属性をもつオブジェクトは、document.getElementById() を使って、簡単に指定することができます。ところが、class 属性を持つオブジェクトは複数あることが前提になりますので特定することができません。getElementByClassName という関数もあるようですが、ブラウザによって対応がさまざまなようです。そこで、次のようなサンプルを作りました。

class にイベントリスナーをセットするサンプル

サンプルでは、dom1 と dom2 という文字に class 属性を設定しています。文字の上にマウスを乗せてみてください。マウスを乗せた文字の色が変わります。
サンプル: class にイベントリスナーをセット

サンプルのソースコード

js_dom_classname.html では、JavaScript の外部ファイルを読み込むコード以外のJavaScript 記述はありません。イベントリスナーをセットしたいタグには、class='dom' を記述してあります。

js_dom_classname.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "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 のソースコード

//JavaScript DOM class のイベントテスト

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;
    }
}

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > class にイベント