今回は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の第一引数についてのご紹介になりました。
次回(後編)では、関数内でよく使う処理についてご紹介して行こうと思います
最後までお読みいただきありがとうございました。