ホーム » JavaScript DOM » JavaScript でのイベント処理

JavaScript でのイベント処理

概要：このチュートリアルでは、JavaScript でイベント処理を実行するさまざまな方法を学びます。

イベントが発生すると、そのイベントに応答して実行される関数であるイベントハンドラーを作成できます。イベントハンドラーは、イベントリスナーとも呼ばれます。イベントをリッスンし、それに応じて応答します。

イベントリスナーは、再利用する場合は明示的な名前を持つ関数、1回のみ使用する場合は無名関数にすることができます。

イベントは、1つ以上のイベントハンドラーで処理できます。イベントに複数のイベントハンドラーがある場合、イベントが発生すると、すべてのイベントハンドラーが実行されます。

イベントハンドラーを割り当てるには、3つの方法があります。

1) HTML イベントハンドラー属性

イベントハンドラーには通常、onで始まる名前が付いています。たとえば、clickイベントのイベントハンドラーはonclickです。

HTML要素に関連付けられたイベントにイベントハンドラーを割り当てるには、イベントハンドラーの名前を持つHTML属性を使用できます。たとえば、ボタンをクリックしたときにコードを実行するには、次のように使用します。

<input type="button" value="Save" onclick="alert('Clicked!')">Code language: JavaScript (javascript)

この場合、ボタンをクリックすると、アラートボックスが表示されます。

JavaScriptコードをonclick属性の値として割り当てる場合、アンパサンド (&)、二重引用符 (")、小なり記号 (<) などのHTML文字をエスケープする必要があります。そうしないと、構文エラーが発生します。

HTMLで定義されたイベントハンドラーは、スクリプトで定義された関数を呼び出すことができます。例：

<script>
    function handleClick() {
        alert('Clicked!');
    }
</script>
<input type="button" value="Save" onclick="handleClick()">Code language: JavaScript (javascript)

この例では、ボタンがクリックされるとhandleClick()関数が実行されます。

handleClick()は、別の<script>要素で定義された関数であり、外部JavaScriptファイルに配置できます。

重要な注意点

HTML要素の属性としてイベントハンドラーを使用する場合の重要なポイントをいくつか示します。

まず、イベントハンドラー内のコードは、明示的に定義しなくてもeventオブジェクトにアクセスできます。

<input type="button" value="Save" onclick="alert(event.type)">Code language: JavaScript (javascript)

次に、イベントハンドラー内のthisの値は、イベントのターゲット要素と同等です。

<input type="button" value="Save" onclick="alert(this.value)">Code language: JavaScript (javascript)

第三に、イベントハンドラーは要素のプロパティにアクセスできます。例：

<input type="button" value="Save" onclick="alert(value)">Code language: JavaScript (javascript)

HTMLイベントハンドラー属性を使用するデメリット

HTMLイベントハンドラー属性を使用したイベントハンドラーの割り当ては、悪い習慣と見なされており、次の理由から可能な限り避ける必要があります。

まず、イベントハンドラーコードがHTMLコードと混ざり合っているため、コードの保守と拡張がより困難になります。

次に、タイミングの問題があります。要素がJavaScriptコードよりも先に完全にロードされた場合、ユーザーはWebページ上の要素との対話を開始でき、エラーが発生します。

たとえば、次のhandleClick()関数が外部JavaScriptファイルで定義されているとします。

<input type="button" value="Save" onclick="handleClick()">Code language: JavaScript (javascript)

ページが完全にロードされ、JavaScriptがロードされていない場合、handleClick()関数は未定義です。この瞬間にユーザーがボタンをクリックすると、エラーが発生します。

2) DOM レベル 0 イベントハンドラー

各要素には、onclickなどのイベントハンドラープロパティがあります。イベントハンドラーを割り当てるには、プロパティを次の例に示すように関数に設定します。

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert('Clicked!');
};Code language: JavaScript (javascript)

この場合、無名関数はbutton要素のメソッドになります。したがって、thisの値は要素と同等です。イベントハンドラー内で要素のプロパティにアクセスできます。

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert(this.id); 
};Code language: JavaScript (javascript)

出力

btnCode language: JavaScript (javascript)

イベントハンドラー内でthisの値を使用すると、要素のプロパティとメソッドにアクセスできます。

イベントハンドラーを削除するには、イベントハンドラープロパティの値をnullに設定します。

btn.onclick = null;Code language: JavaScript (javascript)

DOM レベル 0 イベントハンドラーは、そのシンプルさとクロスブラウザサポートのため、依然として広く使用されています。

3) DOM レベル 2 イベントハンドラー

DOM レベル 2 イベントハンドラーは、イベントリスナーの登録/登録解除を処理するための2つの主要なメソッドを提供します。

  • addEventListener() – イベントハンドラーを登録します。
  • removeEventListener() – イベントハンドラーを削除します。

これらのメソッドは、すべての DOM ノードで使用できます。

addEventListener() メソッド

addEventListener()メソッドは、3つの引数を受け入れます。イベント名、イベントハンドラー関数、およびメソッドにキャプチャフェーズ（true）中またはバブルフェーズ（false）中にイベントハンドラーを呼び出すように指示するブール値です。例：

let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
    alert(event.type); // click
});Code language: JavaScript (javascript)

このように、単一のイベントを処理するために複数のイベントハンドラーを追加できます。

let btn = document.querySelector('#btn');
btn.addEventListener('click',function(event) {
    alert(event.type); // click
});

btn.addEventListener('click',function(event) {
    alert('Clicked!');
});Code language: JavaScript (javascript)

removeEventListener() メソッド

removeEventListener()は、addEventListener()を介して追加されたイベントリスナーを削除します。ただし、addEventListener()に渡されたものと同じ引数を渡す必要があります。例：

let btn = document.querySelector('#btn');

// add the event listener
let handleClick = function() {
    alert('Clicked!');
};
btn.addEventListener('click', handleClick);

// remove the event listener
btn.removeEventListener('click', handleClick);Code language: JavaScript (javascript)

次のように無名のイベントリスナーを使用すると、機能しません。

let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
   alert('Clicked!');
});

// won't work
btn.removeEventListener('click', function() {
   alert('Clicked!');
});Code language: JavaScript (javascript)

概要

  • イベントハンドラーを割り当てるには、HTMLイベントハンドラー属性、要素のイベントハンドラープロパティ、addEventListener()メソッドの3つの方法があります。
  • HTMLイベントハンドラー属性を介したイベントハンドラーの割り当ては避ける必要があります。

クイズ

このチュートリアルは役に立ちましたか？
JavaScript Events
前へ
JavaScript イベント
次へ
JavaScript ページロードイベント
JavaScript Page Load Events