jQuery基础笔记（4）

事件委托

*将多个子元素（li）的事件监听委托给父辈元素（ul）处理
*监听回调是加载父辈元素上的
*当操作任何一个子元素（li）时，事件会冒泡到父辈元素上（ul）
*父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素（li），通过这个子元素调用事件回调函数
事件委托的双方：
*委托方：li
*被委托方：ul
使用事件委托的好处：
*添加新的子元素，自动会有事件响应处理
*减少事件监听的数量：n==>1
jQuery的事件委托API:
*设置事件委托：$(parentSelector).delegate(childrenSelector,eventName,callback)
*移除事件委托：
$(parentSelector).undelegate(eventName)
案例

 <ul>
        <li>11111111111</li>
        <li>22222222222</li>
        <li>33333333333</li>
        <li>44444444444</li>
    </ul>
    <button id="btn1">添加新的li</button>
    <button id="btn2">删除ul上的事件委托监听器</button>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $('ul').delegate('li','click',function(){
            this.style.background="red";
        })
        $('#btn1').click(function(){
            $('ul').append('<li>新增的li</li>')
        })
        $('#btn2').click(function(){
            $('ul').undelegate('click');
        })
    </script>