はじめに:プログラミングを学習する上で、メモとして投稿しておりますので、間違いなどがあればご指摘いただけると幸いです。
addEventListenerメソッドとは
1つのイベントや1つの要素に対して、複数のイベントハンドラを設定できるメソッドです。
HTMLの中に、onclick等を記述してイベントハンドラを設定することもできるが、1つの要素やイベントに対して、1つのイベントハンドラしか設定できないので、イベントハンドラを複数設定したいときに利用する。
また、本来レイアウトを定義すべきHTMLにJavaScriptのコードを記述することはモダンな書き方ではないのでaddEventListenerメソッドの利用を推奨しているらしいです、、、。
構文
要素オブジェクト.addEventListener(イベントの種類、function(){
イベントハンドラ
}, false);
例
addEventListener.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>addEventListener</title></head><body><ulid="lists"></ul><inputid="result"type="text"><inputid="button"type="button"value=""><script src="js/addEventListener.js"></script></body></html>
addEventListener.js
vare=document.getElementById('button');e.addEventListener('click',function(){//イベントハンドラ指定},false);
終わりに
初投稿なりにコードを挿入してみたりと、少し工夫してみました。まだまだ学習することがたくさんある為、日々の積み重ねを大切にし、アウトプット重視で頑張りたいと思います、、。