■
イベントモデル
何等かの動作に応じて自動で処理を実行する仕組みが、DOMオブジェクトには用意されている。それがイベントです。
→イベントに割り振られた処理のことで、通常は関数の形で定義されてる。
イベントハンドラの登録
→(Document/Element).addEventListener("イベント名","イベントハンドラ",真偽)
var dom = document.querySelector("#msg")
Document.addEventListener("mousedown","funcA")
function funcA(){
alert("function A実行");
}
<p id="msg">Clicjk</p>
---------------------------------------------------------------------------------------------------------------
これは、PタグにaddEventListennerでイベントハンドラを組み込む例です。
1つのイベントにいくらでもイベントハンドラを追加することができる。
それぞれのイベントハンドラは、常にイベントハンドラの処理をすべて完了してから次のイベントに進んでいく。複数のイベントが並立して実行されるわけでなく、
常に実行されているのは、1つのイベントハンドラです。
Eventオブジェクトにについて
function init(){
var dom = document.querySelector{"#msg");
document.body.addEventListenner("click",funcA,false);
}
function funcA(event){
var res ="type:" + event.type;
res += "\nid:" + event.target.id;
alert(res);
}
この引数で渡されるeventに、Eventオブジェクトが設定されている。
ここでは、その中から「type」と「target」のIDとを取出して利用していきます。
typeはイベント要素のタイプを示すものでtargetイベントが発生した要素をDOMオブジェクトとして取り出すもの。
イベントハンドとthis
上の例では、イベントが発生したDOMオブジェクトをEventのtargetプロパティで取得していました。が、もっと手軽にイベント発生源を得ることがでｋりう。それだ「this」です。
thisは、クラスメソッドなどで、そのインスタンス自身を示すのに用いられている。
イベントハンドラ内にthisを使うと、実行中のイベントハンドラが設定されているDOMオブジェクトを得ることができる。
