JavaScriptでdelegateをつかうメリットを先生と生徒に例えてご説明しましょう

※ イメージの話なんで実際のJavaScriptの挙動と異なるところがあります。

イメージの話

例えばあなたが30人の生徒を受け持つ教師だったとしましょう。
そして30人の生徒に、

「肩を叩かれたら自分の出席番号を言うようにしましょう。」

という指示を出すことにしたとします。

これをクラス全員、1人1人に伝えるのはなかなか骨が折れる作業です。
また、全員に伝えきったとしても、転校生がくるたびにその生徒に説明しなければならないですし、
逆に転校してしまう生徒には、

「次の学校では肩を叩かれても自分の出席番号を言わなくていいからね。」

と指示を解除してあげる必要があるかもしれません。

そんな時、生徒1人1人に指示をだすのではなく、教室側に、

「この教室では肩を叩かれたら自分の出席番号を言うようにしましょう。」

というポスターを張るとしたらどうでしょう。

まず、伝える手間が相当軽減されます。
また、転校生がきたときも、生徒が転校していくときも特に新たな手間は発生しません。
そう。いいことづくめなのです。

そして、これが僕の中のデリゲートのイメージです。
※ イベントの伝播についてはわかりやすさを優先するために端折ります。

JavaScriptだと

※ コードを簡潔に書くためにjQueryをつかってます。

HTML

<div id="room">
    <div class="member" id="no1">清田</div>
    <div class="member" id="no2">根元</div>
    <div class="member" id="no3">サブロー</div>
    <div class="member" id="no4">荻野</div>
    <div class="member" id="no5">伊志嶺</div>
    <div class="member" id="no6">井口</div>
    <div class="member" id="no7">鈴木</div>
    <div class="member" id="no8">今江</div>
    <div class="member" id="no9">福浦</div>
    <div class="member" id="no10">大松</div>
    <div class="member" id="no11">大嶺</div>
    <div class="member" id="no12">石川</div>
    <div class="member" id="no13">中後</div>
    <div class="member" id="no14">大谷</div>
    <div class="member" id="no15">上野</div>
</div>

というリストがあったときに、

JavaScript

$(".member").on("click", function() {
    alert(this.id);
});

と対象（生徒）すべてにイベントを張るのではなく、

$("#room").on("click", ".member", function() {
    alert(this.id);
});

と対象の親要素（教室）に1つイベントを張る方法、それがデリゲートです。

jQueryのonは引数の数をみて、勝手にデリゲートにしてくれます。
第2引数に対象要素（生徒）のセレクタを渡すだけでデリゲートになるので気軽に使ってみましょう。

親要素（教室）に1回イベントを張っておけば、新しい要素（生徒）が追加されても安心です。

$("#room").on("click", ".member", function() {
    alert(this.id);
});

$("#room").append('<div class="member" id="no16">涌井</div>');

大物がFAで加入しましたが、加入した瞬間からしっかりとルールに従ってくれます。

概念の説明になりましたが、今回は以上です。