【JavaScript】ブラウザイベント入門 - ブラウザのイベントに応じて処理を実行する
JavaScriptのブラウザイベントとイベントハンドラーを解説します。
ブラウザイベント
ブラウザイベントはWEBページで発生するイベントです。
JavaScriptはクリックやキーボード入力など様々なイベントを検知できます。
イベントハンドラー
イベントハンドラーはイベント発生に伴う処理を設定する方法です。
JavaScriptはイベントハンドラーをコールバック関数として設定し実行することができます。
※ イベントハンドラーはイベントリスナーと呼ばれることがあります。
HTML属性またはDOMを利用してイベントハンドラーを設定できます。
クリックイベントを例に各設定方法を確認しましょう。
HTML属性
HTML属性を利用してイベントハンドラーを設定できます。
基本構文
<タグ名 イベント属性="処理">イベント属性はイベントに対応する属性です。
例えばクリックはonclickとなります。
処理はJavaScriptで記述します。
サンプル
<button onclick="console.log('Hello World!');">ボタン</button>Hello World!ボタンをクリックするとonclick属性の処理を実行し、コンソールにHello Worldを出力します。
script要素や外部JSファイルの処理を呼び出すことも可能です。
<button onclick="result();">ボタン</button>
<p id="result"></p>
<script>
function result() {
let result = document.getElementById('result');
result.textContent = 'Hello World!';
}
</script>このボタンをクリックするとp要素のテキストをHello Worldに変更します。
イベントハンドラーのコードは属性値に全て記述しても問題なく動作しますが、コードの管理や可読性、汎用性等の様々な観点に問題が発生する可能性が高くなります。
そのため、一般的にイベントハンドラーの主要処理は関数として定義し、イベント属性では関数の呼び出しのみ行ないます。
ただし、このようなケースに合わない場合もあるので都度判断してコーディングすることが大切です。
DOM
DOMを利用してイベントハンドラーを設定できます。
プロパティ
DOMのプロパティを使った方法です。
登録
基本構文
変数.イベント種別 = 処理サンプル
<button id="btn">ボタン</button>
<p id="result"></p>
<script type="text/javascript">
function result() {
let result = document.getElementById('result');
result.textContent = 'Hello World!';
}
let btn = document.getElementById('btn');
btn.onclick = result;
</script>解除
基本構文
変数.イベント種別 = nullサンプル
<button id="btn">ボタン</button>
<p id="result"></p>
<script type="text/javascript">
function result() {
let result = document.getElementById('result');
result.textContent = 'Hello World!';
}
let btn = document.getElementById('btn');
btn.onclick = result;
btn.onclick = null;
</script>メソッド
addEventListenerメソッドを使った方法です。
登録
基本構文
変数.addEventListener(イベント種別, 処理)サンプル
<button id="btn">ボタン</button>
<p id="result"></p>
<script type="text/javascript">
function result() {
let result = document.getElementById('result');
result.textContent = 'Hello World!';
}
let btn = document.getElementById('btn');
btn.addEventListener('click', result);
</script>複数登録
addEventListenerメソッドで設定したコールバック関数はイベントハンドラーに追加されます。
コールバック関数を置き換えるのではなく、追加されるので、複数のコールバック関数を登録することが可能です。
<button id="btn">ボタン</button>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
function result1() {
let result = document.getElementById('result1');
result.textContent = 'Hello World!';
}
function result2() {
let result = document.getElementById('result2');
result.textContent = 'Good Morning!';
}
let btn = document.getElementById('btn');
btn.addEventListener('click', result1);
btn.addEventListener('click', result2);
</script>解除
基本構文
変数.removeEventListener(イベント種別, 処理)サンプル
<button id="btn">ボタン</button>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
function result1() {
let result = document.getElementById('result1');
result.textContent = 'Hello World!';
}
function result2() {
let result = document.getElementById('result2');
result.textContent = 'Good Morning!';
}
let btn = document.getElementById('btn');
btn.addEventListener('click', result1);
btn.addEventListener('click', result2);
btn.removeEventListener('click', result1);
</script>イベントの種類
イベントには様々な種類があります。
HTML属性とaddEventListenerメソッドでイベント種別の名称が異なりますが、onの有無で簡単に覚えられます。
HTML属性は名称の先頭にonが付き、addEventListenerメソッドは付きません。
| HTML属性 | addEventListener | 意味 |
|---|---|---|
| onclick | click | クリックした時 |
| oncontextmenu | contextmenu | 右クリックした時 |
| ondblclick | dblclick | ダブルクリックした時 |
| onkeydown | keydown | キー（キーボードなど）が押された時 |
| onkeyup | keyup | キー（キーボードなど）が押されている状態から離された時 |
| onkeypress | keypress | キー（キーボードなど）が押されている状態 |
| onfocus | focus | フォーカスが当たった時 |
| onblur | blur | フォーカスが外れた時 |
| onchange | change | 値の変更が確定した時 |
| oninput | input | 値を変更した時 |
| onsubmit | submit | 送信された時 |
| onmousedown | mousedown | 押した時 |
| onmouseup | mouseup | 押している状態から離した時 |
| onmousemove | mousemove | 要素上をマウスが移動した時 |
| onmouseover | mouseover | 要素上にマウスが被さった時 |
| onmouseout | mouseout | 要素上からマウスが外れた時 |
| onwheel | wheel | マウスホイールが回転した時 |
| onselect | select | テキストが選択された時 |
| onreset | reset | リセットした時 |
| onload | load | データ（ページや画像、外部ファイルなど）が読み込まれた時 |
| onerror | error | エラーが発生した時 |
