JS事件委托

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');    });    // 动态添加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';    });});作者：梵天wwlsky链接：http://www.jianshu.com/p/847568e6149e來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。