注意：event.delegateTarget  VS  event.currentTarget.

栗子：

1     <script>
2       $('ul').on('click', 'li', function(e) {
3         $(this).css('color', 'red')
4         // $(e.delegateTarget).css('background', '#fc2') // 接受委托的被委托人（事件对象本身）
5         $(e.currentTarget).css('background', '#fc2') // 发起委托的委托人（自身）
6       })
7     </script>

tips: 

.delegate()  jQuery 3.0中已弃用此方法，请用 on()代替。 但是我用的3.4.1，还可以用，但是注意传参顺序

delegate(selector,events,[data],fn) 

区别于 on（）传参顺序

on(events,[selector],[data],fn)

 =====================================

几个额外注意点：

  1. 使用委托事件，对于后来添加的子元素 其事件依然有效 因为事件是挂载在父级（被委托人）身上的 
     1     <script>
 2       $('ul').delegate('li', 'click', function(e) {
 3         console.log(e.target) // -> 当前被点击的 li
 4         console.log(this) // -> 当前被点击的 li
 5         console.log(e.currentTarget) // -> 当前被点击的 li
 6         console.log($(this)[0]) // -> 当前被点击的 li
 7         $(this).css('background', 'red')
 8       })
 9       // 使用委托事件，对于后来添加的子元素 其事件依然有效 因为事件是挂载在父级上的
10       $('button').click(() => {
11         var $li = $('<li>这是后来添加的</li>')
12         $('ul').append($li)
13       })
14     </script>

     

     

  2. 对于委托事件的取消操作 .off()是办不到的 得用 .undelegate()  并且，该事件对象应为 被委托人 $(e.delegateTarget) 
    1     <script>
2       // 1. 对于委托事件的取消操作 .off()是办不到的  得用 .undelegate()
3       $('ul').delegate('li', 'click', function(e) {
4         $(this).css('background', 'red')
5         //  2. 取消委托事件， 注意可不是$(this)了 需要给到 被委托人
6         //  此时 结果是 执行一次委托事件后 取消委托事件
7         $(e.delegateTarget).undelegate()
8       })
9     </script>