fc2ブログ

jQueryのイベントのバインド

例えば画面内に存在する山盛りの要素全てに、イベントハンドラをバインドするのが億劫な場合、それら要素の親または先祖要素に、イベントハンドラをバインドし、イベント発生元要素で処理を分岐する手がある。


(function(){
var Lib={
event : function(modernEvt){
var evt = modernEvt||event;
return {
type:evt.type,
target:evt.target||evt.srcElement
}
}
};
var $=function(id){return document.getElementById(id);}
window.onload=function(){
$("aaa").onclick=function(evt){
if(Lib.event(evt).target.name=="xxx"){
//...
}
}
}
})()



でjQueryでイベントハンドラ書く場合、こんな感じだが、

$('input').click(function(node){
//...
});



先のJavascriptと同じ事をするには、こんな感じで書けばよさそう。

$('body').bind('click',function(e){
alert('tagName='+e.target.tagName)
})


複数イベントの一括割当はこんな感じ。

$('input').bind('click blur',function(e){
alert('input.type='+e.target.type+' event.type='+e.type)
})



スポンサーサイト



トラックバック

▼トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)