今更取り上げる話でもないのですが、毎回名前を忘れるのでメモとして残すことにしました。
今回はjavascriptの
デレゲートっていうものを簡単に解説しようかと思います。
DOM要素にイベントをバインドしようとする時、いまは
on()を使います。
ただ、これを動的に
(つまり、javascriptで生成した要素)に適用しようとするとバインドできないということが度々あるわけですね。
これは、onが実行された時にその要素があるかないかで判定されてしまうからというわけです。
ただ、目的のDOM要素の後にしかスクリプトが書けないっていうのはスクリプトがとっ散らかる原因になりますし、そもそもbody要素にあんま置きたくないですよねほんとは。
そこで考えられたのが、
イベントデリゲートというわけです。
デリゲートってのは、英語で書くと
delegateで、意味はgoogleさんによると
代表らしいっすね(笑)
これが何を示すのかってのは、サンプルを見たらわかると思います。
$("ul").on("click","li",function(){
alert($(this).text());
});
例えばこんなんですね。li要素をクリックしたら発火するようなイベントになってます。
ここで重要なのが、イベントをバインドしてる先がliではなく、その親の
ulにバインドしているってのが重要になってくるわけです。
このonメソッドの意味としては、
「クリックしたとき」「"そのulの中のli"に限り」「function()を実行する」っていう意味になります。
まぁつまるところ、liを代表してulの方にバインドしてるからイベントデリゲートって言うんですね。
じゃあ、もう少し進んだサンプルを考えます。つまり先程言ったように、「動的に」イベントを追加したい場合、ですね。
$("div.after").on("click",function(){
alert($(this).text());
});
例えばafterクラスのdiv要素をクリックしたら発火するイベントを用意したいなぁ～って思って、こういうのを書くとまぁ動かないわけですよ。
これでよくハマってたんですよね。
で、これが動かない原因がまさに
clickイベントをバインドしようとしたけど、div.afterなんてねぇよボケって時にこうなります。
動的に追加した要素なんて最初どこにも存在しないので必然的に無視されちゃうわけですね。
そこで颯爽と登場するのがイベントデリゲート君です。
やってることは単純です。以下のコードがその全てです。
$(document).on("click","div.after",function() {
alert($(this).text());
});
重要なのは
親要素をdocumentにする。これだけです。
というのも、documentはあらゆるものの親という特別な要素なんですが、こいつにバインドしちゃえば、それは常に存在する要素なのでうまくバインドできる、というわけですね。
その後の絞り込みに関してはonメソッドの第二引数の方でやってくれます。
正確な語源は知らないんですけど、このように親要素を「存在するかどうか分からない要素の代表になってもらう」という仕組みのことをイベントデリゲートっていうんでしょうね。
こういうくっだらない仕組みで毎回ハマってる気がするんで、忘れないようにしないと、ですね。まぁもう忘れないんですけど、名前が思い出せなかったので記事にしました(笑)
そもそも最初からDOMツリーが構築されてからjavascriptが走ってくれたら便利なんですけどねぇ･･････なんでそうしてくれないんでしょうね。わかりません(笑)