はじめに
自分の勉強用メモとして残しています。
イベントとは
JavaScriptにおける「イベント」とは、Webページ上で発生するあらゆるアクションの総称です。
例えば、ボタンのクリック、フォームへの入力、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
イベントハンドラとは
ハンドラとは英語のhandlerであり動詞handle（扱う）から由来しています。
JavaScript様々なイベントの発生下タイミングで処理を行うことが出来ます。
例えば、ボタンがクリックされた際に画像を切り替える、ページが読み込まれた際に何かを表示させる、など。
このようなイベントの処理を行うのが「イベントハンドラ」の役目です。
「on」キーワードの隣にイベント名をくっつけたものがイベントハンドラのネーミングパターンとなっています。
イベントハンドラの一覧
| イベントハンドラ | 説明 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外 れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当 たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更され た時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発 生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onMouseOut | マウスが離れた時に発生 |
| onMouseOver | マウス乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
参考例
onclick (要素がクリックされた時)を例に挙げてみます。
HTML属性から発火
HTML要素にはイベント属性というものがあり、そこに対応するイベントハンドラとJavaScript内の実行したい関数名を設定することで、要素に設定したイベントによって関数を実行できます。
html
<p id="testid" onclick="test()"> 要素がクリックされた時にイベント発火</p>
js
function test() {
console.log("クリックされました！");
}
イベントリスナーから発火
同じ要素の同じタイプのイベントに複数の処理の登録が出来ないので、
イベントを複数指定したい場合はこちらの方法を使いましょう。
JS側で取得した要素.addEventListener(イベント名, 関数);
html
<p id="testid"> 要素がクリックされた時にイベント発火</p>
js
var elem1 = document.getElementById("testid");
elem1.addEventListener("click", function(){
console.log('クリックされました！（イベントリスナー）');
});
該当要素をクリックして、クリックしたタイミングでコンソールログが表示されれば、成功です。