スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryのイベント操作を極める!

最近、jQuery関連のプラグインや記事を読むと、live()だとかdelegate()だとかon()だとか色んなイベント操作関連のメソッドが使われているのを目にしますが、これらのメソッドって一体なんなのか知ってますか?

恥ずかしながら僕は知りませんでした。
…が勉強してみたら案外簡単で、分かりやすいサンプルが書けたので紹介します。

おさらい

まず、普通にイベントを登録する場合はclick()とかbind()を使います。

$('a').bind('click', function(event) {
	event.preventDefault();
	alert('クリックされたよ!');
});

// 上と同じ
$('a').click(function(event) {
	event.preventDefault();
	alert('クリックされたよ!');
});

// イベントを破棄する場合は..
$('a').unbind('click');

live()

live()はdocumentにあらかじめイベントを登録しておいて、条件に当てはまる要素に自動でイベントを割り当てるメソッドです。
例えば、$('a').live('click', func)とかしたら、a要素すべて(これから動的に追加されるものも含めて)にクリックイベントを登録します。

delegate()

delegate()は、基本的な動作はlive()と同じですが登録先がdocumentではなく指定した要素になります。
例えば、$('div').delegate('a', 'click', func)とかすると、div以下のa要素すべて(これから動的に追加されるものも含めて)にクリックイベントを登録します。

on()とoff()

on()とoff()はjQuery1.7から追加されたメソッドで、bind・live・delegateに取って代わるものです。
bind・live・delegateのエイリアス的な感じですが、これからはon()で書くことが推奨されています。

trigger()

jQueryのイベント操作で忘れてはならないのがtrigger()ですね!
これは、任意のタイミングでイベントを発行することができるメソッドで、 例えばEnterキーを押したときにkeydownEnterイベントを発行するとかいった、カスタムイベントを作ることができます。

$(window).on('keydown', function(event) {
	if ( event.keyCode == 13 ) $(this).trigger('keydownEnter');
})
.on('keydownEnter', function(event) {
	alert('Enterキーが押されました!');
});

preventDefault()とstopPropagation()

preventDefault()とstopPropagation()もかなり見かけるけど、よくわからない人もいるんじゃないでしょうか?
preventDefault()はブラウザのデフォルトの動作を止めるメソッドで、リンクをクリックしたときに「リンク先に飛ぶ」という動作を止めるとかそういったことができます。

$('a').on('click', function(event) {
	event.preventDefault(); // リンク先に飛ばなくする
});

stopPropagation()はlive()とかdelegate()とかon()とかでドキュメントに対して登録したイベントが上の階層から伝播されてくるのを止めるためのメソッドです。
文章での説明が少し難しいのでサンプルを書いてみました。

ね、簡単でしょ?

いかがでしたでしょうか?
たぶん思っていたよりも簡単だったと思います。
これだけ覚えておけばおそらくイベント操作にはあまり困らないと思いますので、どんどんイベント操作でリッチなUIを作ってください・・・!

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。