More than 3 years have passed since last update.

JavaScriptでのイベント実装方法

Last updated at 2020-03-25Posted at 2020-03-23

3種類のイベントハンドラの実装方法

コードで書かれているtargetはイベントハンドラをつけたいオブジェクトや要素です。

<body onload="myfunc()">
</body>

<script>
  const myfunc () => {
    //実行したい処理
  }
</script>

##イベントプロパティを使用

無名関数を使用

target.onload = () => {
  //実行したい内容
}

target.onload = myfunc;

const myfunc = () => {
  //実行したい内容
}

##イベントリスナーを使用

即時関数を使用

target.addEventListener('DOMContentLoaded', () => {
  //実行したい内容
});

target.addEventListener('DOMContentLoaded', myfunc);

const myfunc = () => {
  //実行したい内容
}

イベントリスナーを使うメリットは下記2点。
・同じ要素に複数のイベント設定が可能
・早く実行される
　⇒画像の読み込みなどで時間がかかり、早い段階でJavaScriptの処理を行いたい場合は、DOMContentLoadedを使った方がよい。

対象要素.addEventListener(種類, 関数, [,useCapture])

第3引数のuseCaptureはページの読み込みをする順番を設定しています。

trueの場合は上から実行される。(Capture Phase)
fasleの場合は下から実行される。(Bubbling Phase)
記載しない場合はfalseの設定になっていて、基本的にはfalseで問題ないです。
(参考：addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ)

ただし、第三引数はboolean以外も設定可能ということでデフォルトは下記にしておくのがよさそう。

対象要素.addEventListener(種類, 関数, {
once: true,
passive: true,
capture: false})

イベントの種類	内容
load	Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）
DOMContentLoaded	Webページが読み込みが完了した時に発動（画像などのリソースは含まない）
click	マウスボタンをクリックした時に発動
mousedown	マウスボタンを押している時に発動
mouseup	マウスボタンを離したときに発動
keydown	キーボードのキーを押したときに発動
keyup	キーボードのキーを離したときに発動
keypress	キーボードのキーを押している時に発動
change	フォーム部品の状態が変更された時に発動
submmit	フォームのsubmitボタンを押したときに発動
scroll	画面がスクロールした時に発動

document.getElementById("id").onclick = myfunc;

const myfunc = (e) => {
  console.log(e.target);
}

この時、引数のeにはその前につかんでいる要素"id"の情報が渡されていてその情報を使用することが可能です。

まだよくわかっていないが、event.targetとevent.srcelementはブラウザによって動く動かないがあるらしい。
次のサイトにどちらでも動くように実装するコードが載っていたのでこちらを採用しよう。

function getTarget() { return this.srcElement || this.target; }
Event.prototype.getTarget = getTarget;

基本的には下記URLに乗っているメソッドは使えるのかな？
Element

便利で使えそうなメソッドをメモ

あまりわからなかったので随時追加