由来:
<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>
![c73f63d511ffcccfff1e0ebc2f570006.png](https://i-blog.csdnimg.cn/blog_migrate/28a36e8f42eb8baeea5472cc40950dc0.jpeg)
获取不到动态增加li的事件函数
事件委托
$('ul').on('click', 'li', function() {
console.log($(this).text())
})
$('button').on('click', function() {
$('ul').append(`<li>${$('li').length + 1}</li>`)
})
![e9664d52497e20f387417a024a9b150e.png](https://i-blog.csdnimg.cn/blog_migrate/fb9961f9d83ed7bb336b9a757232f94b.jpeg)
使用on方法中使用事件的时候可以在里面存函数
$('ul').on('click', 'li', {name: 'fanghuayong'}, function() {
console.log(e.data)
})
![5ac1f6fb5c6c2b169d2f94e93d0ef02c.png](https://i-blog.csdnimg.cn/blog_migrate/3a6a5d8c33d0dd5532ef4f9332a8952e.png)
解除事件绑定: 就这么简单
$('button').off('click')
![1a62b03a9ae16347ce6d27a271d20303.gif](https://i-blog.csdnimg.cn/blog_migrate/55b58b7dee3276656c4e3a120ad11922.gif)
如果有多个绑定事件函数,只取消其中一个,把事件函数引用值传入即可,如:
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>`)
})
![36c8110d436ba0ba34d4b78c3bac29b2.gif](https://i-blog.csdnimg.cn/blog_migrate/43eb2b8e6a2e4a0767819b734b64c2c8.gif)
自动触发的事件 trigger
可以在这里传值给事件函数
$('button').trigger('click')
刷新就自动执行点击事件
可以触发系统事件(click等),也可以触发自定义事件:
$('li').on('color', function(e, a, b) {
$(this).css('color', 'red')
})
$('button').click(function() {
$('li').trigger('color')
})
![56e7eac70b1ee14e86a670d2ac30eace.png](https://i-blog.csdnimg.cn/blog_migrate/409ce7716a3f2fe7e24a44a3cf7351fe.png)