jq: 事件-委托

由来:

        <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button>增加</button>
<script src="../jquery-3.4.1.js"></script>
<script>
     $('li').on('click', function() {
         console.log($(this).text())
     })
     $('button').on('click', function() {
         $('ul').append(`<li>${$('li').length + 1}</li>`)
     })
</script>
      

获取不到动态增加li的事件函数

事件委托

        $('ul').on('click', 'li', function() {
     console.log($(this).text())
    })
$('button').on('click', function() {
     $('ul').append(`<li>${$('li').length + 1}</li>`)
})

      

使用on方法中使用事件的时候可以在里面存函数

        $('ul').on('click', 'li', {name: 'fanghuayong'}, function() {
    console.log(e.data)
})

      

解除事件绑定: 就这么简单

        $('button').off('click')

      

如果有多个绑定事件函数，只取消其中一个，把事件函数引用值传入即可，如:

        function show() {
    console.log(123)
}
$('button').on('click', show)
$('button').off('click', show)

      

只执行一次的事件函数 one方法

可以用于登录之类的地方，如果不是必须登录，可以做点击登录的时候再加载html结构，达到减少结构，使加载时间更快。

        $('button').one('click', function() {
    $('ul').append(`<li>${$('li').length + 1}</li>`)
})

      

自动触发的事件 trigger

可以在这里传值给事件函数

        $('button').trigger('click')

      

刷新就自动执行点击事件

可以触发系统事件（click等），也可以触发自定义事件:

        $('li').on('color', function(e, a, b) {
 $(this).css('color', 'red')
    })
 $('button').click(function() {
 $('li').trigger('color')
    })