ボタンがクリックされたときに処理を実行するには、「ボタンがクリックされたこと」を感知するしくみが必要です。それが「イベント」です。Elementオブジェクトなどにはいくつかのイベントが用意されており、クリックなどの「事件」が発生すると、関連付けておいた関数が呼び出されます。イベントによって呼び出される関数のことを「イベントハンドラ」または「イベントリスナー」と呼びます。イベントハンドラの設定方法はいくつかあり、ここで使用しているのは「on~」で始まるプロパティを利用しています。このプロパティに関数を代入すると、それが呼び出されるようになります。「btn_addprod」というIDを持つ要素を選択し、そのonclickプロパティにaddProduct関数を代入しています。これでbtn_prodがクリックされたときに、addProduct関数が呼び出されるようになります。その前の「window.onload=pageLoaded」の部分も、イベントハンドラの設定です。WEBページの読み込みが完了すると、WEBブラウザのウィンドウを表すwindowオブジェクトにloadイベントが発生します。そして、onloadプロパティに設定しておいたイベントハンドラが呼び出されるのです。イベントが呼び出される際に、イベントに関する情報を収めた１つの引数が渡されます。これを利用できるようにするには、イベントハンドラにする関数でも１つの引数を定義します。サンプルでも「event」という引数を指定しています。
今回ではonclickプロパティを使用しましたが、現在ではイベントハンドラを設定する新しい方法が用意されています。それは「addEventListenerメソッド」を利用する方法です。１つのイベントに複数のイベントハンドラを設定できるなどのメリットがあります。
addEventListener(type,listener,useCapture)
引数の「type」にはイベントタイプを表すテキストを、「listener」にはイベントハンドラに関するを指定します。「useCapture」はイベントが発生するタイミングを制御するための引数ですが、通常はfalseを指定しておけば問題ありません。ここでのコードをaddEventListenerを使う形に書き直すと、以下のようになります。
window.addEventListener('load',pageLoaded,false);
function pageLoaded(event){
var elem=document.getElementById('btn_addprod');
elem.addEventListener('click',addProduct,false);
}
ここまでjavascriptを勉強してきて一つ思ったことがありました。それはプログラミングとはどういう流れなのかという事です。今までHTMLやCSSを勉強してきて、わからないとこがでできたり悩むこともありましたが、結局のところすっきりと理解する事ができていたと思っています。しかし、javascriptでは曖昧にしか理解することしかできず、とても悔しいです。分かるようで分からないといった具合でなかなか前に進めていません。やはりもう一回プログラミングとは何かということをしっかりと理解し、早くjavascriptを覚えたいです。
11月5日 宮本 勇