Help us understand the problem. What is going on with this article?

JavaScriptでのイベント実装方法

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

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

HTML属性を使用

<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の詳細

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

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

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

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

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

(参考:addEventListener の第3引数が拡張されてるという話)

イベントの種類

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

多すぎるので他は下記を参照。
JavaScriptのイベントハンドラ一覧

イベント発生時に内容を受け取る方法

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

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

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

イベント発生時に受け取るオブジェクトについて

コード 意味
e.type イベントの種類を取得
e.target イベントが送られたオブジェクト
e.srcElement イベントが送られたオブジェクト
e.clientX/Y ブラウザ領域の左上を原点とする座標
e.screenX/Y 画面左上を原点とする座標
e.pageX/Y ページの左上を原点とする座標
e.offsetX/Y イベント発生元の要素の左上を原点とする座標

2020-03-23_22h50_54.jpg

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

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

targetで使えるプロパティ・メソッド

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

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

メソッド・プロパティ 説明
innerHTML 要素内容のマークアップをStringで返す
tagName 要素のタグ名をStringで返す
getBoundingClientRect() 要素のサイズと、ビューポートにおける位置を返します。

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

【参考資料】
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
【JavaScript入門】addEventListener()によるイベント処理の使い方!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away