事件委托是通過事件冒泡的原理，利用父級去觸發子級的事件。
如下html，如果不用事件委托，將每一個li都去添加click事件監聽，非常麻煩。
另外就是如果通過js動態創建的子節點，需要重新綁定事件。
而利用事件委托的話，只需要給父級綁定一個事件監聽，即可讓每個li都綁定上相應的事件
eg：
<ul id="wrap">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <
 
li>item5</li>
</ul>

$(function(){

    // 普通事件
    $(‘li‘).click(function(){
        $(this).css(‘background‘, ‘#D4DFE6‘);
    });


    // 動態添加DOM節點
    $(‘#addBtn‘).click(function(){
        $(‘#wrap‘).append( $(‘<li>item‘+ ($(‘li‘).length + 1) +‘</li>‘) );
    });

    /**
     * 事件委托
     */

    // jQuery 1.9已廢棄
    /*$(‘li‘).live(‘click‘, function(){
        $(this).css(‘background‘, ‘#D4DFE6‘);
    });*/

    // jQuery的delegate寫法
    $(‘#wrap‘).delegate(‘li‘, ‘click‘, function(ev){

        // this 指向委托的對象 li
        $(this).css(‘background‘, ‘#D4DFE6‘);

        // 找到父級 ul#wrap
        $(ev.delegateTarget).css(‘border‘, ‘2px solid #f00‘);
    });

    // jQuery的on的寫法
    $(‘#wrap‘).on(‘click‘, ‘li‘, function(ev) {
        // this 指向委托的對象 li
        $(this).css(‘background‘, ‘#D4DFE6‘);

        // 找到父級 ul#wrap
        $(ev.delegateTarget).css(‘border‘, ‘2px solid #f00‘);
    })


    // js原生寫法
    var _wrap = document.getElementById(‘wrap‘);
    _wrap.addEventListener(‘click‘, function(ev){
        var ev = ev || event;
        if( ev.target.nodeName == ‘LI‘ ) {
            ev.target.style.background = ‘#8EC0E4‘;
            console.log( ev.target.innerHTML );
        }

        // 找到父級 ul#wrap
        this.style.border = ‘2px solid #f00‘;
    });

});
 

jQuery事件委托