吕滔博客

业务场景：当我们在容器中动态加载了新的元素样式，发下ul为固定容器，动态加载li，如果需要对容器中的li做操作时，直接普通事件是不操作的，此时委托即可解决

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

通过动态创建新的li标签追加在尾部，click事件默认是不能处理内容的
通过代理就可以解决

普通事件

$('li').click(function(){
    $(this).css('background', '#D4DFE6');
});

动态添加DOM节点

$('#addBtn').click(function(){
    $('#wrap').append( $('<li>item'+ ($('li').length + 1) +'</li>') );
});

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';
});