click, bind, live, delegate関数のまとめ : jQuery

Tweet

Pocket

jQueryはイベントをハンドリングするclick, bind, live, delegate^[1]を提供している。a要素のclickイベントを例にしてそれらの機能の違いをまとめる。

» Demo

click

$(selector).click(function (e) {});

selectorにクリックイベントを設定する。

<ul>
    <li><a class="handler" href="">リンク</a></li>
</ul>

リンクをクリックするとclicked!!というテキストをリストに追加して新たなリストを追加する。

$('a.handler').click(function (e) {                                        
    var parentnode = $(this).parent();
    var html = parentnode.html();
    html += '<br />clicked!!';
    parentnode.html(html);
    // $(this).closest('ul')は空
    parentnode.closest('ul').append('<li><a class="handler" href="">リンク</a></li>');
    return false;
});

bind

$(selector).bind('click', function (e) {});

bindはイベントを複数設定できる点がclickメソッドとは異なる。

<ul>
    <li><a class="bind" href="">リンク</a></li>
</ul>

clickイベントとmouseoverイベントを一度に設定している。

$('a.bind').bind('click mouseover', function (e) {                     
    if (e.type === 'click') {
        var parentnode = $(this).parent();
        var html = parentnode.html();
        html += '<br />bind clickイベント';
        parentnode.html(html);
        // $(this).closest('ul')は空
        parentnode.closest('ul').append('<li><a class="bind" href="">リンク</a></li>');
    } else if(e.type === 'mouseover') {
        $(this).css('background', 'yellow');
    }
    return false;

});

live

$(selector).live('click', function (i) {});

selectorにclickイベントを設定する。click,bindと違いwindowオブジェクトがイベントを監視するので動的に追加した要素もイベント処理が行われる。

<ul>
    <li><a class="live" href="">リンク</a></li>
</ul>

動的に追加したリンクにもイベントが設定される。

$('a.live').live('click', function (e) {
    // イベントの監視はwindowオブジェクトが行うので
    // 動的に追加した要素にもイベントが設定される。
    var parentnode = $(this).parent();
    var html = parentnode.html();
    html += '<br />clicked!!';
    parentnode.html(html);
    // $(this).closest('ul')は空
    parentnode.closest('ul').append('<li><a class="live" href="">リンク</a></li>');
    return false;
});

delegate

$(elem).delegate(selector , 'click', function (e) {});

liveと同じように動的に追加した要素にも対応する。liveと異なりwindowオブジェクトではなく指定した要素がイベントを管理する。

<ul>
    <li><a class="delegate" href="">リンク</a></li>
</ul>

$('ul').delegate('a.delegate', 'click', function (e) {
    // イベントの監視はulオブジェクトが行うので
    // 動的に追加した要素にもイベントが設定される。
    var parentnode = $(this).parent();
    var html = parentnode.html();
    html += '<br />delegate!!';
    parentnode.html(html);
    // $(this).closest('ul')はulは空
    parentnode.closest('ul').append('<li><a class="delegate" href="">リンク</a></li>');
    return false;
});

カスタムイベント

組み込みイベントのハンドラ内でtriggerを呼び出しbindに登録済みのイベントを発生させる。

<ul>
    <li><a class="custom" href="">リンク</a></li>
</ul>  

$('a.custom').bind('customclick', function(e, message) {              
    console.log(message);
});
$('a.custom').click(function (i) {
    $(this).trigger('customclick', ['Custom Event']);
    return false;
}); 

コード

                        
<h3>click</h3>
<ul>
    <li><a class="handler" href="">リンク</a></li>
</ul>
<h3>bind</h3>
<ul>
    <li><a class="bind" href="">リンク</a></li>
</ul>
<h3>live</h3>
<ul>
    <li><a class="live" href="">リンク</a></li>
</ul>
<h3>delegate</h3>                                               
 <ul>
    <li><a class="delegate" href="">リンク</a></li>
</ul>

jQuery(function ($) {
    $('a.handler').click(function (e) {
        var parentnode = $(this).parent();
        var html = parentnode.html();
        html += '<br />click!!';
        parentnode.html(html);
        // $(this).closest('ul')はulは空
        parentnode.closest('ul').append('<li><a class="handler" href="">リンク</a></li>');
        return false;
    });
    $('a.bind').bind('click mouseover', function (e) {
        if (e.type === 'click') {
            var parentnode = $(this).parent();
            var html = parentnode.html();
            html += '<br />bind clickイベント';
            parentnode.html(html);
            // $(this).closest('ul')はulは空
            parentnode.closest('ul').append('<li><a class="bind" href="">リンク</a></li>');
        } else if(e.type === 'mouseover') {
            $(this).css('background', 'yellow');
        }
        return false;

    });
    $('a.live').live('click', function (e) {
        // イベントの監視はwindowオブジェクトが行うので
        // 動的に追加した要素にもイベントが設定される。
        var parentnode = $(this).parent();
        var html = parentnode.html();
        html += '<br />click!!';
        parentnode.html(html);
        // $(this).closest('ul')はulは空
        parentnode.closest('ul').append('<li><a class="live" href="">リンク</a></li>');
        return false;
    });
    $('ul').delegate('a.delegate', 'click', function (e) {
        // イベントの監視はulオブジェクトが行うので
        // 動的に追加した要素にもイベントが設定される。
        var parentnode = $(this).parent();
        var html = parentnode.html();
        html += '<br />delegate!!';
        parentnode.html(html);
        // $(this).closest('ul')は空
        parentnode.closest('ul').append('<li><a class="delegate" href="">リンク</a></li>');
        return false;
    });
 });

参考リンク

» イベント – MDN
» ふじこのプログラミング奮闘記

[1] jQuery v1.7からはon, offメソッドが追加されている。