#はじめに

自分の勉強用メモとして残しています。

#イベントとは

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('クリックされました！（イベントリスナー）');
});

該当要素をクリックして、クリックしたタイミングでコンソールログが表示されれば、成功です。