JavaScriptのイベント駆動について復習

はじめに

自分は現在、大学3年生でフロントエンジニアとして、インターンをしている。
普段はTypeScript,Reactを使って開発を行っているので、今一度JavaScriptのイベントについて復習をしたい。（メモ用に書き残した）

イベント駆動について

JavaScriptでイベントを設定する方法は2種類ある

• on~
• addEventListiner

on〜を使うパターンについて

このパターンでは2つのイベントを同時につけることができない。
なぜなら、もし２つつけたとしても、１つ目のイベントは２つ目の方のイベントに更新されてしまうからである。

style {
const button = querySelector.("button")
button.onclick　= () =>{ alert("clicked")}
}

<button onclick="alert("clicked")">click me</button>

addEventListener

button.addEventListener("イベント名"、"実効する関数",{オブジェクト})

const event = button.addEventListener("click",
()=> {console.log("クリックされたお"),
{
//一度発火されたら、削除される。
once : true,
}})

このwindowは表示表域を指している
window.addEventListener

イベントの種類
https://developer.mozilla.org/ja/docs/Web/Events

ユーザーインタラクションイベント
click: ユーザーが要素をクリックしたとき。
dblclick: ユーザーが要素をダブルクリックしたとき。
mousedown, mouseup: マウスボタンが押されたり離されたりしたとき。
mousemove: マウスが要素上を移動したとき。
mouseover, mouseout: マウスが要素に入ったり出たりしたとき。
keydown, keyup, keypress: キーボードのキーが押されたり離されたりしたとき。

UIイベント
load: ページや画像が完全にロードされたとき。
unload: ページがアンロードされるとき（例えば、別のページに移動するとき）。
resize: ブラウザウィンドウのサイズが変更されたとき。
scroll: スクロールが発生したとき。

フォームイベント
submit: フォームが送信されたとき。
change: フォーム要素の値が変更されたとき。
focus, blur: 要素がフォーカスを得たり失ったりしたとき。
タッチイベント
touchstart, touchmove, touchend, touchcancel: タッチスクリーンデバイスにおけるタッチ操作に関連するイベント。

addEventListenerの３つ目の引数

{
//一度発火されたら、削除される。
once : true,
//キャプチャリング
capture:true
//重たい処理でも、画面がカクつかないように
passive
}

removeEventListener(”イベント”,関数を入れた定数)

イベントを削除する

button.removeEventListener("click",event)

eventオブジェクト

イベントはブラウザによって発火する。そして、そのイベントの情報を第二引数の関数で受け取ることができる。

button.addEventListener("click",(event) => {
console.log(event)
})

イベントの伝播するフェーズ

①キャプチャリングフェーズ：Windowオブジェクトから子の要素に下りていくフェーズ

②ターゲットフェーズ：イベントが発生した要素に到達するフェーズ

③バブリングフェーズ：イベントが発生した要素から親要素に上っていくフェーズ

バブリング

子要素で起こったイベントが親要素まで起きる

keydownなどのイベントによって、どの要素からバブリングが始まるかは異なる

キャプチャリング

windowオブジェクトから小要素の順番でイベントを実行していくこと。

第三引数で{capture : true}と設定することにより、キャプチャリングフェーズの時に発生する

button.addEventListener("click",() => {
console.log("event")
},
{capture : true; }
)

stopPropagation

キャプチャリング、バブリングをスキップする。

現段階のフェーズでストップする。例ターゲットフェーズでstopPropagationを使用すれば、キャプチャリングとターゲットだけ起きる。

stopImmediatePropagation()

同じ要素にイベントをつけていたとしても、これを実行したイベントリスナで止まる。

preventDefault()

ブラウザのデフォルトの挙動が起きるのを防ぐことができる。

formElement.addEventListener("submit", (event) => {
    // submitイベントの本来の動作を止める
    event.preventDefault();
    console.log(`入力欄の値: ${inputElement.value}`);
});

formは、送信後リロードされてしまうが、
preventDefault()をつけることによって防ぐことができる。

dispatchEvent()

JavaScript で DOMの要素に対してイベントをプログラム的に発火させるためのメソッド。このメソッドを使用することで、ユーザーのアクション（クリックやキーボード入力など）によって通常発生するイベントを、コード上から直接トリガーすることができます。