jQuery事件委托

Posted 2020-09-21 JaydenLD@Clara

事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。
如下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‘;
    });

});