somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【jQuery】イベントの設定メソッドに関するまとめ

jQueryに多数存在するイベント設定メソッドのまとめです。

ライブラリを見る

phpフレームワークは良く見いていましたが、Javascriptライブラリはあまり見ていません…。見る環境を作ったり、手軽に見れるように学ぶことが後々で自分のためになると思います。

bind

イベントを設定するbindですが、一致するすべての要素に対して設定してしまいます。また、.clickなどの手軽に設定できるメソッドは内部的にbindを使用しているようです。

イベント設定を削除したいときは以下のようにします。

$('セレクタ').unbind('イベントの種類');

また、イベントを実行したいときは以下のようにします。

$('セレクタ').trigger('イベントの種類');

live

以下のようにしてイベントを設定します。

$('セレクタ').live('イベントの種類', functoin() {});

liveは、セレクタに対して直接イベントを設定するのではなく、documentに設定します。これにより、設定する要素が増えないためパフォーマンスがよくなります。どのようにしてイベントを実行するかは、documentに対してイベントが実行されたときに、そのイベントの発生源がセレクタからであるを判断してから処理を実行します。

liveで設定したイベントを削除するには、以下を実行します。

$('セレクタ').die('イベントの種類');

イベントの種類を省略すると、設定されているすべてのイベントを削除できます。

deletegate

以下のようにしてイベントを設定します。

$('セレクタ').live('セレクタの子要素セレクタ', 'イベントの種類', functoin() {});

deletegateはliveと似ていますが、liveと違いセレクタに対して直接イベントを設定します。しかし、イベント発生源が第一引数の子要素セレクタであるときに処理を実行します。

delegateで設定したイベントを削除するには、以下を実行します。

$('セレクタ').undelegate('セレクタの子要素セレクタ', 'イベントの種類');

イベントの種類を省略すると、指定した子要素から発生するイベントを削除できます。子要素をを省略すると、設定されたすべてのイベントを削除できます。

まとめ

jQueryもいつのまにか1.7にまで上がっていて、1.4をつかっていた自分は置いてけぼりでした。bindのデメリットをliveが、liveのデメリット(要素にうまく設定できないことがあるらしい)をdelegateでカバーしています。後者のdocumentや特定要素にイベント設定を行い、発生源を調べて処理を実行するというのは、先日調べたイベントバブリングがここで活躍できました。

また、1.7にはon/offというこれらのメソッドを統括したメソッドがあるようです。

$('セレクタ').on('イベントの種類', 'セレクタの子要素セレクタ', function() {})

セレクタはイベントを設定する要素で、これをdocumentにすることでliveをあらわします。第二引数は省略可能で、省略時はbindと同じになります。要するに、delegateとほぼ同じです。

それぞれの特徴とパフォーマンスを見て柔軟に設定できたらなと思います。