2021.11.03

Javascript DOMとは②イベント処理

私的に一番の難関であるイベント処理について、

まずは代表的なイベントがこちら

click：要素がクリックされたら
dblclick：要素がダブルクリックされたら
change：要素の内容が変更されたら
load：ページが読み込まれたら
scroll：画面ががスクロールされたら
mouseover：要素にカーソルが乗ったら
submit:フォームが送信されたら

ちなみに、イベント処理を学習していると、「イベントハンドラ」という単語を

よく耳にします。

このイベントハンドラとは、

「イベントが発生したときに、指定した処理を行いますよ」という意味だそうです。

イベントハンドラの代表的な書き方は「onイベント名」です。例：onclickとかね。

Javascriptのイベント処理の書き方

①addEventListenrを使う方法

格納した変数.addEventListenr(イベント名 , 無名関数(){
ここに処理を書く;
})
 
const clickBtn = document.getElementById(“js-btn”)
clickBtn.addEventListener(“click”, function () {
  console.log(“送信されました”);
})
 

格納した変数.addEventListenr(イベント名 , 関数 , false);

function 関数名(){

ここに処理を書く;

}

const clickNewBtn = document.getElementById(“js-btn”)
clickNewBtn.addEventListener(“click”, submBtn);
function submBtn() {
  console.log(“送信完了”);
}
 
★consoleには書いた順にどちらも表示されるよ。

②プロパティにイベントハンドラを指定する方法

格納した変数.イベントハンドラ＝関数名
function 関数名(){
ここに処理
}
 
const clickNewBtn = document.getElementById(“js-btn”);
clickNewBtn.onclick = submBtn;

function submBtn() {
  console.log(“送信完了”);
}
 
格納した変数.イベントハンドラ＝無名関数(){
ここに処理
}
 
const clickBtn = document.getElementById(“js-btn”)
clickBtn.onclick = function () {
  console.log(“送信されました”);
}
 
★このやり方は、複数処理を書いた場合、処理が上書きされて、
後に書いたコードが表示されるよ。
 
他にもいろいろありそうですが、今はこれが限界です。
 

＼SHARE／

カテゴリー:
タグ: