【DOM操作(前編)】JavaScriptのaddEventListenerについて、「・・したら」をまとめてみた

11299 ワード
dom操作 JavaScript es6 初学者向け JavaScript テキストリンク

今回はJavaScriptのDOM操作の
「addEventListener」
についてまとめてみました。
DOM操作初心者の方のご参考になれば嬉しいです。

基本的なDOM操作(addEventListener)の流れ

①まずは要素の取得。
②取得した要素にaddEventListenerで処理を追加する
→ このaddEventListenerの第一引数と第二引数が重要です

③処理の"きっかけ(第一引数)"を記述
→⭐️今回のメインはこの③になります。

④"処理を関数内(第二引数)"に記述
→→※こちらは次回(後編)で紹介します...

※慣れている方は①②は飛ばしてOK

①要素を取得する

DOM操作をする上でまずはHTMLに記述している要素を取得する必要があります。
まずはHTML上でbuttonを用意。

<button class="addButton">Add</button>


ブラウザ上にこのようなbuttonができていたらOKです。
このbuttonの要素を取得していきます。

const btn = document.querySelector('.addButton');
// "btn"と定義しました。このbtnに処理をしていくという感じです。

※その他タグやidから取得する方法もあります。

②イベントを追加する("クリックしたら・・・")

イベントを追加する方法も数種類ありますが、
今回は"addEventListener"で。

// 先ほど定義したbtnにaddEvenListnerでイベント処理を追加
btn.addEventListener('③きっかけ', () => {
   ④何かしらの処理 
})

ざっくりですがこのカタチで記述します。
まだ慣れていない方はこの形をまる覚えで大丈夫です。

具体的に１つ例を見せます。

// まずはbuttonの要素を取得
const btn = document.querySelector('.addButton');

// btnに対してaddEventListenerで’click’したら・・・を追加
btn.addEventListener('click', () => {
// コンソールにaddを表示
　　console.log('add')
});
// 結果的に”ボタンをクリック"したら"コンソールに"add"が表示される

こういったカタチで使用します。
次の章からは色んな例を紹介していきます

③“きっかけとなるアクション”(第一引数)について

前編のメインである第一引数のレパートリーを一部紹介していきます。

・クリックしたら → 'click'

btn.addEventListener('click', () => {
  console.log("クリックできてるよ");
});

・ホバーしたら → 'mouseover'

btn.addEventListener('mouseover', () => {
  console.log("hoverじゃないでmouseoverやで");
});

・ダブルクリックしたら → 'dblclick'

btn.addEventListener('dblclick', () => {
  console.log("ダブルクリックできてるよ");
});

・【入力欄】入力したら(更新したら) → 'input'

ここからはbuttonではなくinput要素で解説していきます。

const inputArea = document.querySelector("input");

input.addEventListener('input', () => {
  console.log("入力中");
});

こちらはリアルタイムで更新されてる状態。
次のchangeとの違いに注意

・【入力欄】値が変化(確定)したら → 'change'

ここれは主にinputタグやselect要素と一緒に使用されます。
入力してenterで確定したら

input.addEventListener('change', () => {
  console.log("値が変わりました");
});

・【入力欄】フォーカスしたら → 'focus'

input.addEventListener('focus', () => {
  console.log("focusされてます");
});

・【入力欄】フォーカスが外れたら(他の箇所をクリックしたら) → 'blur'

input.addEventListener('blur', () => {
  console.log("外れた");
});

・【入力フォーム】フォーム入力して送信(確定)されたら → 'submit'

☆重要:"form"にaddEventListenerすること( buttonやinputではない！！)

//formの要素取得
const formArea = document.querySelector('form');

formArea.addEventListener('submit', (e) => {
//  本来ならsubmitすることでページ遷移してしまう。
//  それを回避するためにpreventDefault(遷移してしまったら入力したものも消えてしまいます)
e.preventDefault
console.log("提出済")
});

まとめ

今回はaddEventListnerの第一引数についてのご紹介になりました。
次回(後編)では、関数内でよく使う処理についてご紹介して行こうと思います

最後までお読みいただきありがとうございました。