jQuery3.5--事件委派_jquery 3.5 事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_42139212/article/details/103449571

事件委托(委派/代理):

将多个子元素(li)的事件监听委托给父辈元素(ul)处理
监听回调是加在了父辈元素上
当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
移除事件委托: $(parentSelector).undelegate(eventName)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        $(function(){
            $('ul').delegate('li','click',function(){
                this.style.background ='red';
            });
            $('#btn1').click(function () {
                $('ul').append('<li>新增的li....</li>');
            });
            $('#btn2').click(function () {
                $('ul').undelegate('click');
            })
        })
    </script>
</head>
<body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
</body>
</html>