JavaScriptの中で、先日add EventListener()を勉強したので、備忘録として使用方法をまとめます。
「add EventListener()」とは
add EventListener()はイベントリスナーと呼ばれ、JavaScriptから様々なイベント処理を実行することが出来るメソッドです。
指定したイベントが発生した際、「add EventListener()」を利用して処理を行います。
「add EventListener()」の基本構文
イベントの「種類」と処理を実行するための「関数」を指定します。
「対象要素 . add EventListener( 種類 , 関数 , false ) 」
・第1引数
イベントの種類を指定。
このイベントがどのようなケースに対応するのか特定します。
・第2引数
第1引数のイベント発生時に実行する処理を記述した関数です。
・第3引数
イベント伝搬の方式を「true/false」で指定します。
通常はfalseを指定します。
「add EventListener()」の関数の設定方法
関数の設定には、
①外部に関数を書く方法 ②無名関数の方法 ③アロー関数の方法
の3種類があります。
一般的に使われる書き方は、2の無名関数です。
①外部の関数設定の場合
対象要素.add EventListener(種類,sampleEvent,false);
function sampleEvent(){
// code
}
②無名関数の場合
対象要素. add EventListener( 種類 , function(){
// code
} , false);
③アロー関数の場合
対象要素 . add EventListener( 種類 , (){
// code
});
無名関数使用例
・Form要素内のbuttonタグを実行するscript文を作ります。
<form name =”sampleform”>
<input type=”text” name=”title” value = “Hello World!” />
<button id=”btn”>実行</button>
</form>
<script>
var btn = document.getElementById(‘btn’);
btn.add EventListener( ‘click’ , function(){
form.submit();
});
</script>
まずgetElementByIdを利用してID名btnの要素を取得します。
そして、要素btnをclick（クリック）した際に、submitを実行するという命令文を作ることができました。
イベントリスナー内で使える主要なイベント種類
「add EventListener()」の第1引数に指定するイベント種類をいくつか紹介します。
click : マウスボタンをクリックしたとき
mousedown : マウスボタンを押しているとき
mouseup : マウスボタンを離した時
mousemove : マウスカーソルが移動したとき
keydown : キーボードを押したとき
keyup : キーボードを離したとき
keypress : キーボードを押しているとき
change : フォーム部品の状態が変更されたとき
scroll : 画面がスクロールしたとき
load : Webページの読み込みが完了したとき（画像などのリソースは含まない）
DOMContentLoaded : Webページが読み込みが完了したとき（画像などのリソースは含まない）
まとめ
今回はJavaScriptのadd EventListenerについて勉強したのでその内容をまとめてみました。
勉強をしてこんなに簡単なことだったのかと驚きもしましたが、しかし、それも基本がないと理解が遠のくのだと、改めて感じました。
基本の形をしっかりと身につけて、様々なプログラミングで活用していきたいと思います。
