事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这种直接绑定​​#list li​​的写法，其实就是绑定了5次li标签。这样的多次绑定是比较消耗性能的。

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这种写法是绑定​​#list​​​节点，用于监听从子节点​​li​​​的事件冒泡事件。这样只需要绑定父节点​​#list​​，既节省性能，也可以解决一个新增子节点的问题。

下面来写写示例，演示一下。

首先编写呈现绑定​​#list li​​的示例


jquery 事件委托 - delegate()_事件冒泡


当点击​​li​​​标签的时候，则设置​​backgroundColor​​​为​​red​​，如下：


jquery 事件委托 - delegate()_css_02


这个示例有一个缺点，如果后面再创建一个​​li​​​标签，那么此时这个新增的​​li​​​标签就没有这个​​click()​​事件。

在​​click()​​​事件后面创建一个​​li​​标签

如果需要在​​#list​​​内部的最后加上一个​​li​​​标签，可以使用​​append()​​方法。


jquery 事件委托 - delegate()_事件委托_03


因为这个最后第6个​​li​​​标签是在绑定​​click()​​​事件之后创建的，所以这种写法，怎么点击第6个​​li​​​标签都不会触发​​click()​​事件。

改写使用事件委托的方式，则第6个​​li​​​标签可以触发​​click​​事件


jquery 事件委托 - delegate()_事件委托_04


采用父节点​​#list​​​使用事件委托的方法，可以绑定新增的​​click()​​​节点事件。因为这个是利用事件冒泡的原来来实现的。
如果点击​​​#list​​​下任何​​li​​​，这样的话都会出现一个​​click()​​​事件冒泡至​​#list​​​，此时​​#list​​再进行处理即可。

示例完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#list li").click(function(){
            //  $(this).css({"backgroundColor":"red"});
            // })

            $("#list").delegate("li","click",function(){
                $(this).css({"backgroundColor":"red"});
            })

            var $li = $('<li>6</li>');

            $("#list").append($li);
        })
    </script>
    <style type="text/css">
        #list{
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- ul#list>li{$}*5 -->
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>


jquery 事件委托 - delegate()_事件冒泡_05