【JavaScript】イベント処理に使うaddEventListenerの書き方

今回はイベント処理に使うaddEventListenerのメソッドの書き方について紹介していきたいと思います。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

addEventListenerとは

addEventListenerとはマウスによるクリックやフォーカス、からキーボードからの入力など様々なイベント処理を実行するためのメソッドになります。

addEventListenerの書き方

addEventListenerの下記のパターンがあります。

基本的な書き方

対象要素.addEventListener(イベント名, 関数, false);

addEventListenerの第一引数にはイベント名を指定します。
イベント名は「click」、「scroll」などです。

書き方の注意点

書くときには下記の点に気を付けましょう。

  • 関数名には()を付けない
  • 処理を行う関数には引数をつける

上で指定した呼び出したい関数の書き方については下記のようになります。

function 関数名(e){
        ~
}

無名関数を設定する

対象要素.addEventListener(イベント名, function() {
  // 処理を記述
}, false);

サンプル

上記の書き方を参考にどのように記述するのかの例を紹介します。

画面のどこかをクリックしたら処理を行う

画面全体を指定する場合はwindowをつかいます。

window.addEventListener('click', function() {
    console.log("クリックされました");
}, false);

テキストボックスがフォーカスされたら処理を行う

html

<input id="num" type="text">

javascript

var elm = document.getElementById('num');
elm.addEventListener('focus', function() {
    console.log("フォーカスされました");
}, false);

addEventListenerで使える主なイベント名

下記はaddEventListenerで指定できる主なイベント名になります。

マウス操作

clickボタンクリックしたとき
scroll画面をスクロールしたとき
mousemoveカーソルが対象の要素内で動いたとき
mouseoverカーソルが要素に触れたとき
mousedownボタンが最初に押されたとき
mouseupボタンから離れたとき
mouseoutカーソルがターゲットから出たとき

テキストボックス

submitsubmitボタンがクリックしたとき
focusフォーカスされたとき
blurフォーカスがはずれたとき

その他

load読み込みが完了したとき

コメント

タイトルとURLをコピーしました