イベント処理の指定JavaScript入門

HTMLタグの属性に指定する

今まで、HTMLの属性(onclickやonload等）にJavaScriptの関数を指定していました。 以下のような感じです。最も簡単な指定法です。

<input type="button" value="押して下さい" onclick="fnc()">

DOM要素に指定する

イベント処理はHTMLタグの属性に記述するより、 JavaScriptから指定した方が保守管理が楽になります。 それで今度は、JavaScriptを使ってid属性を付けた要素にイベントを指定する方法を見てみましょう。

以下のスクリプトでは、id属性を付けたdivタグに、 onmouseoverイベントとonmouseoutイベントを指定しました。 文字上にカーソルを乗せると文字列が書き換えられ、 カーソルを外すとさらに文字列が変化します。

<div id="dom">ここにイベントを指定します</div>

<script>
var obj = document.getElementById("dom");

//マウスカーソルが乗った時の処理
function fnc1()
{
  obj.innerHTML = "マウスカーソルが乗りました";
}

//マウスカーソルが外れた時の処理
function fnc2()
{
  obj.innerHTML = "マウスカーソルが外れました";
}

//イベントに関数を指定する
obj.onmouseover = fnc1;
obj.onmouseout  = fnc2;

</script>

＜サンプル＞文字列にマウスカーソルを合わせると、文字が変化します

スクリプトの説明

では上記スクリプトを詳しく見ていきましょう。

divタグにid属性を付ける

<div id="dom">ここにイベントを指定します</div>

最初にdivタグにid属性を付け、属性値を「dom」にしました。 こうすることでJavaScriptを使って操作することができます。 確認したいのは、onmouseoverやonmouseoutといったイベント系の属性が記入されていない点です。 これらはJavaScriptで指定します。

属性値を持つ要素の取得

var obj = document.getElementById("dom");

続いてscriptタグ内を見ていきます。最初にgetElementByIdを使って、id属性値domを持つ要素を取得し、変数objに格納します。

関数fnc1と関数fnc2

function fnc1{ obj.innerHTML= "" }
function fnc2{ obj.innerHTML= "" }

次に、二つの関数が出てきます。関数fnc1はマウスカーソルが乗った時用で、 関数func2はカーソルが外れた時にためのものです。 innerHTMLを使ってタグ内の文字列を書き換えます。

イベントに関数を指定する

obj.onmouseover = fnc1;
obj.onmouseout  = fnc2;

最後に、イベントに関数を指定しました。ここで右辺に注目してください。 指定するのは関数そのもので、「fnc1()」のように括弧付で書いてはいけません。 ここが上記のHTML属性での指定と違うので、気を付けて下さい。

次のページでは、addEventListener()を利用したイベントの登録方法を見ていきます。