事件委托是通過事件冒泡的原理，利用父級去觸發(fā)子級的事件。

如下html，如果不用事件委托，將每一個(gè)li都去添加click事件監(jiān)聽，非常麻煩。

另外就是如果通過js動態(tài)創(chuàng)建的子節(jié)點(diǎn)，需要重新綁定事件。

而利用事件委托的話，只需要給父級綁定一個(gè)事件監(jiān)聽，即可讓每個(gè)li都綁定上相應(yīng)的事件。

html

<ul id="wrap">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

js

$(function(){

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

    // 動態(tài)添加DOM節(jié)點(diǎn)
    $('#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';
    });

});