ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法



「addEventListener()」は、
指定された対象に、指定されたイベントが発生したことを検知して、
指定された関数などを実行することを設定できる「EventTarget」のメソッドの1つ。

document.querySelector('#ID名').addEventListener("click", 関数名);
指定方法は簡単で、
HTMLファイルに「Javascript」を記述しなくても、
イベントを検知できる。


「addEventListener()」メソッドでイベントを監視するのは、
「HTML要素(Element)」「Webページ(Document)」「ブラウザ(Window)」などに設置することが多い。

発生するイベントの種類は、
たくさんあるので、下記の「イベントの種類」を参照してみてください。 良く利用されるイベントは、
・click - クリックした時
・mouseenter - マウスが上に来た時
・mouseleave - マウスが上から離れた時
・load - ページや画像が読み込まれた時
・scroll - スクロールされた時
・submit - 送信ボタンが押された時
などが良く使われる。



「addEventListener()」 メソッドの書式




構文

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);

Gecko/Mozilla only

target.addEventListener(type, listener [, useCapture, wantsUntrusted ]);



サンプルコード

const Get_ID = document.querySelector('#ID名');
const Get_ID = document.getElementById("ID名");
const capture = {
capture : true
};
Get_ID.addEventListener("click", 関数名);
Get_ID.addEventListener("click", 関数名, capture);
Get_ID.addEventListener("click", 関数名, false);



「addEventListener」を設置するときに、実行する関数を組み込む書式

document.querySelector('#ID名').addEventListener('click', function() {
クリックされた時に実行したいコードを記述
});


返値

undefined


引数

引数の種類説明
type 対象とするイベントの種類を表す文字列
listener 指定された型のイベントが発生するときに通知 (Event インターフェースを実装しているオブジェクト) を受け取るオブジェクト。これは、 EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数でなければなりません。コールバックについて詳しくは、イベントリスナーのコールバックを参照してください。
options Optional 対象のイベントリスナーの特性を指定するオプション。

capture

Boolean値で、「true」を指定した場合、
この型のイベントがDOMツリーで下に位置する「EventTarget」に配信される前に、
登録された「listener」に配信されることを示す。

once

Boolean 値で、「true」を指定した場合、
「listener」 の呼び出しを一回のみのとする。
「listener」は一度実行された時に自動的に削除される。

passive

Boolean値で、「true」を指定した場合、
「listener」で指定された関数が、「preventDefault()」を呼び出さない。
呼び出されたリスナーが「preventDefault()」を呼び出すと、
自動的にコンソールに警告を出力する。

mozSystemGroup

Boolean値で、「true」を指定した場合、
リスナーをシステムグループに追加する。
コードが「XBL」「chrome」 で実行されている場合のみ利用可能。
useCapture Optional Boolean値で、「true」を指定した場合、
この型のイベントがDOMツリーで下に位置する「EventTarget」に配信される前に、
登録された「listener」に配信されることを示す。
上方向にバブリングしているイベントは、キャプチャーを使用するように指定されたリスナーを起動しない。
デフォルトは、「false」。
wantsUntrusted Boolean値で、「true」の場合、
ウェブコンテンツによって発火された合成イベント (カスタムイベント) を受け取る。
ブラウザーのクロームのデフォルトは「false」。
一般のウェブページのデフォルトは「true」。
この引数は Gecko でのみ利用可能。


イベントの種類

イベント名説明
error リソースをロードできなかったとき。
abort リソースの読み込みが中止されたとき。
load リソースとそれに依存するリソースのロードが完了したとき。
beforeunload ウィンドウ、文書、およびそのリソースがアンロードされる前。
unload 文書または依存するリソースがアンロードされたとき。
ネットワークイベント
online ブラウザーがネットワークにアクセスしたとき。
offline ブラウザーがネットワークにアクセスできなかったとき。
フォーカスイベント
focus 要素がフォーカスされているとき (バブリングなし)。
blur 要素がフォーカスを失ったとき (バブリングなし)。
focusin 要素がフォーカスされようとしているとき (バブリングあり)。
focusout 要素がフォーカスを失いかけているとき (バブリングあり)。
WebSocket イベント
open WebSocket 接続が確立されたとき。
message WebSocket 経由でメッセージを受信したとき。
error WebSocket の接続が障害(例えば、データの一部を送信できなかったなど)により終了したとき。
close WebSocket 接続が閉じられたとき。
セッション履歴イベント
pagehide セッション履歴のエントリが横断されているとき。
pageshow セッション履歴のエントリが移動されているとき。
popstate セッション履歴エントリが(場合によっては)ナビゲートされているとき。
CSS アニメーションイベント
animationstart CSS アニメーションが開始したとき。
animationend CSS アニメーションが終了したとき。
animationiteration CSS アニメーションが繰り返されたとき。
CSS トランジションイベント
transitionstart CSS トランジションが実際に始まったとき。(発火までに遅延がある)
transitioncancel CSS トランジションがキャンセルされたとき。
transitionend CSS トランジションが終了したとき。
transitionrun CSS トランジションが実行し始めたとき。(遅延が始まる前に発火する)
フォームイベント
reset リセットボタンが押されたとき。
submit サブミットボタンが押されたとき。
プリントイベント
beforeprint プリントダイアログを開いたとき。
afterprint プリントダイアログを閉じたとき。
文章構成イベント
compositionstart 文章作成の準備がされたとき(キーボード入力のキーダウンに似ていますが、音声認識などの他の入力でも動作します)。
compositionupdate 作成中の文章に文字が追加されたとき。
compositionend 文章作成が終了したり、キャンセルされたとき。
ビューイベント
fullscreenchange 要素がフルスクリーンモードに切り替えられたとき。
fullscreenerror 技術的な理由か許可が下りなかったため、フルスクリーンモードに切り替えることができないとき。
resize ドキュメントビューのサイズが変更されたとき。
scroll 画面がスクロールされたとき。
クリップボードイベント
cut 選択範囲が切り取られてクリップボードにコピーされたとき。
copy 選択範囲がクリップボードにコピーされたとき。
paste クリップボードからアイテムが貼り付けられたとき。
キーボードイベント
keydown 任意のキーが押されたとき。
keypress Shift、Fn、CapsLock を除く任意のキーが押された状態にあるとき (連続して発生する)。
keyup 任意のキーが (押された状態から) 解放されるとき。
マウスイベント
auxclick ポインティングデバイスのボタン(主ボタン以外のボタン)が、要素上で押し離されたとき。
click ポインティングデバイスのボタン(任意のボタン。まもなく主ボタンのみになります)が、要素上で押し離されたとき。
contextmenu マウスの右ボタンがクリックされたとき(コンテキストメニューが表示される前)。
dblclick ポインティングデバイスのボタンが、要素上でダブルクリックされたとき。
mousedown ポインティングデバイスのボタンが、要素上で押されているとき。
mouseenter ポインティングデバイスが、リスナーが接続されている要素に移動したとき。
mouseleave ポインティングデバイスが、リスナーが接続されている要素から外れたとき。
mousemove ポインティングデバイスが、要素上を移動しているとき(マウスの移動に合わせて連続発火します)。
mouseover ポインティングデバイスが、リスナーが接続されている要素、またはその子要素に移動したとき。
mouseout ポインティングデバイスが、リスナーが接続されている要素、またはその子要素から外れたとき。
mouseup ポインティングデバイスのボタンが、要素上で離されたとき。
pointerlockchange ポインターがロックされたか解除されたとき。
pointerlockerror ポインターのロックが、技術的な理由か動作を拒否されたためにできないとき。
select テキストが選択されているとき。
wheel ポインティングデバイスのホイールボタンが、任意の方向に回転しているとき。
ドラッグ & ドロップイベント
drag 要素もしくは選択文字列がドラッグされている間。(350 ミリ秒ごとに断続的に発火します)
dragend ドラッグ操作が終わったとき。(マウスボタンが放された時、または ESC キーが押されたとき)
dragenter 要素もしくは選択文字列がドラッグされて、有効なドロップ対象に入ったとき。
dragstart ユーザーが、要素もしくは選択文字列をドラッグし始めたとき。
dragleave 要素もしくは選択文字列がドラッグされて、有効なドロップ対象からはずれたとき。
dragover 要素もしくは選択文字列が、有効なドロップ対象の上をドラッグされている間。(350 ミリ秒ごとに断続的に発火し
ます)
drop 要素が有効なドロップ対象にドロップされたとき。(訳注:原文に「選択文字列」の記述がない)
メディアイベント
audioprocess The input buffer of a ScriptProcessorNode is ready to be processed.
canplay The browser can play the media, but estimates that not enough data has been loaded to
play the media up to its end without having to stop for further buffering of content.
canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering.
complete The rendering of an OfflineAudioContext is terminated.
durationchange The duration attribute has been updated.
emptied The media has become empty; 例えば、this event is sent if the media has already been
loaded (or partially loaded), and the load() method is called to reload it.
ended Playback has stopped because the end of the media was reached.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
pause Playback has been paused.
play Playback has begun.
playing Playback is ready to start after having been paused or delayed due to lack of data.
ratechange The playback rate has changed.
seeked A seek operation completed.
seeking A seek operation began.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
timeupdate The time indicated by the currentTime attribute has been updated.
volumechange The volume has changed.
waiting Playback has stopped because of a temporary lack of data.
Progress イベント
abort Progression has been terminated (not due to an error).
error Progression has failed.
load Progression has been successful.
loadend Progress has stopped (after "error", "abort" or "load" have been dispatched).
loadstart Progress has begun.
progress In progress.
timeout Progression is terminated due to preset time expiring.
ストレージイベント
change (see Non-standard events)
storage
更新イベント
checking
downloading
error
noupdate
obsolete
updateready
値変更イベント
broadcast
CheckboxStateChange
hashchange
input
RadioStateChange
readystatechange
ValueChange
未分類のイベント
invalid
localized
message
open
show


Back