ウェブデザイナーの日記

jQuery関連の英文を読んでいるとdelegationていうワードがよく出てきて、私はその意味がわからなかった。辞書を引くと『委任』とか書いてあってますますわからない。event deligate でぐぐるとJavascriptだけでなく技術系のページがドバーと出てくるので、きっとプログラム専門家にはなじみ深いワードなのだろうと思ったりするけど、デザイナー風情にはチンプンカンプンですよ。

Karl Swedbergさんの書いた記事を読んで「そういうやり方があんのか！」とわかった（ような気がする）。これですよ↓

Working with Events, part 1 at Learning jQuery

記事の前半は「cssグルからJavascriptに足を踏み込んだばかりのみんなへ」というくらいのレベルの話で、後半のメインパートでは、私にとって疑問の種だったevent delegationについての基本的な話になる。後半パートが勉強になりました。簡単にいうとこういうことらしい。

tableやリストタグなどがよくある例だと思うが、極めて長大ロングで複雑にネストしたhtmlがあったとする。それらの中のとあるターゲット要素に対してイベントをbindしたいとする。その場合、私のような凡人はセレクタを駆使してそのターゲット要素をピンポイントすることに腐心するけれど、そういうふうに絞り込むんじゃなくて、グルリと回りを囲む親要素（tableとかulとか）にひとつだけイベントをわりあててしまう。大胆。そして、そのfunctionの中身において、ピンポイントしていくというやり方なのですね。絞り込むために、jQueryのイベントオブジェクトと適宜それに適したフィルタを類を使う。元記事のサンプルでは、isを使っています。

元記事の一番最後にあるサンプルがそれである。ターゲット要素を個別にセレクトしてイベントをわりあてるか、回りから責めていくかの違いだけれども、これをやることによってケースによってはコードがすごく短く書けるとか、イベントの割り当てがひとつだけなので動作が軽くなるとかの効果があるそうです。

おーそういうことかー、これをevent delegationというのであるか（てことですかね？）、とひとつ勉強した気になったけれど、これを知らなかった私はlive()を使うことによって既にソレ的なことを無意識にやっていたのかなと思われる。よく知らないけど、たぶんlive()はコレ的なことを内部でやってるのかなと。それなら別に中身を知らなくてもlive()を使ってりゃいいじゃないかという気もするけれど、知ってるのと知らないのでは大違いなので、教わってよかったと思った。

この記事が書かれたのは2008年の3月でずいぶん古いが、learningjquery.comの新しいエントリには、closest()の説明がある↓

Working with Events, Part 3: More Event Delegation with jQuery

event delegationちゅうもんをわかった上でclosest()を使うと、これまたレベルアップ間違いナシ！上の記事では、closest()に関するチュートリアル中心に、次バージョン1.4のことにも触れています。

『Javascript』カテゴリのエントリ

• jQuery :: 画像のリロード
• Javascript :: ecl.jsにながらくお世話になりました
• jQuery :: ネストしたリスト + ui.sortable.js
• jQuery :: safariとappend関連メモ
• jQuery :: チェックボックスが並んだテーブルをjQueryでどーこーするサンプル
• jQuery :: セレクタを使いこなす10のTraversing機能
• jQuery Tips 20選
• jQuery + SimpleModalを使った超シンプルなLightbox系スクリプト 4KB
• Javascript :: いろんな書き方のパス文字列をurl文字列に変換/統一する関数

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

 クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

ADD YOUR COMMENT! / コメントする