JavaScriptでaddEventListenerを初めて使ったこと。

jQueryを使わない素のJavaScriptでイベントを登録する方法で.addEventListener()を使ってみました。

形式としてオブジェクト.addEventListener(‘イベント‘,function(e){});でオブジェクトで発生したイベントでfunciton(e){}が実行されます。HTML内で動作することを前提とするとオブジェクトはimgなどのHTMLの要素になります。

昔イベントを記述しようとする場合HTMLのエレメントのプロパティにonclick='関数'を記述するやり方しか知りませんでした。addEventListenerを使うとHTML側ではJavaScriptを余り意識することなく(idぐらいは必要)、HTMLとJavaScriptを分離することが出来ると思われます。

疎結合にすることで再利用が出来たり、単体テストがしやすくなるなどのメリットがあるらしいのですが、個人的にはイベント登録がHTMLのレンダリングの後まとめて行うことが出来る点が好みです。

以前HTMLで扱うJavaScriptを書く場合jQueryは必須な感じがしましたが、現在ではブラウザ間の機能差が埋まり素のJavaScriptでも問題が発生しにくくなっているらしいです。jQeryは素のJavaScriptより記述がシンプルでコード量が少なくて済むのですが、最近はテキストエディタのインテリセンス機能が優秀なので入力の手間だけであれば素のJavaScriptでも良いかなと思います。