イベントハンドラ設定方法 : JavaScript

Pocket

イベントハンドラとは「イベントが発生した際に実行される処理」のことを差します。Javascriptでイベントハンドラを設定する方法は大きく2つの方法がありります。

  1. HTML属性として設定。
  2. Javascriptオブジェクトのプロパティとしての設定。

本ブログではイベントハンドラとして基本的に2のタイプのみ扱います。

1. HTML属性として記述

イベントハンドラはonclick,onmouseover,onmouseoutなどのHTML要素の属性として設定できます。
本ブログではこの書き方を基本的には扱いません。

<head>
<script type="text/javascript">
var callback = function () {
    // 処理
}
</script>
</head>
<body>
    <p onclick="callback();">
        段落です。
    </p>
</body>

Javascriptオブジェクトのプロパティとして記述

本ブログではイベントハンドラは基本的にこの書き方をします。

<head>
<script type="text/javascript">
window.onload () {
    var elm = document.getElementById('sample');
    elm.click = function () { // 処理 };
}
</script>
</head>
<body>
<p id="sample"> 段落です。</p>
</body>

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。