我们已经掌握了基本的绑定事件的方式，例如给 div 绑定一个点击事件：$('div').click(function(){}) 即可，那为什么还要专门学习这篇文章呢？如果我要求你给一个 div 分别绑定点击，移上，移开三个事件，那么根据以前的做法我们就会给它依次绑定三次不同的事件，很繁琐，代码冗余很严重，这就需要这篇文章来帮你将解决这个问题 ------ on() 绑定 与 off() 解绑
文章目标：
📑 掌握利用 on 给元素绑定多个事件
📑 掌握利用 on 给元素绑定事件委派
📑 掌握利用 on给动态创建的元素绑定事件
📑 掌握利用 off 解绑事件
📑 掌握利用 one 绑定单次触发事件
文章目录：
📊 一：利用 on 绑定事件
1.1 利用 on 绑定多个事件（不同事件处理程序）
1.2 利用 on 绑定多个事件（相同事件处理程序）
1.3 利用 on 事件委派
1.4 利用 on 给动态创建的元素绑定事件
📊 二：利用 off 解绑事件
2.1 解绑所有事件
2.2 解绑指定事件
2.3 解绑事件委派
📊 三：绑定单次触发事件
📊 四：自动触发事件
4.1 $('ele').事件
4.2 $('ele').trigger(事件)
4.3 $('ele').triggerHandler(事件)
📊 五：事件对象
一：利用 on 绑定事件
🧽 本版块带大家掌握 利用 on 绑定多个事件（不同事件处理程序），利用 on 绑定多个事件（相同事件处理程序），利用 on 事件委派，利用 on 给动态创建的元素绑定事件
📮 1.1 利用 on 绑定多个事件（不同事件处理程序）
📕 给元素绑定多个事件，不同事件处理程序的格式：以对象形式写入
$('div').on({
click:function(){},
mouseover:function(){},
mouseout:function(){}
})
案例：我们给一个 div 分别绑定三个事件，不同的事件处理程序：
<div></div>
<script>
$('div').on({
click:function(){
console.log('点击事件触发了');
},
mouseover:function(){
console.log('鼠标移上去了');
},
mouseout:function(){
console.log('鼠标移开了');
}
})
</script>
📮 1.2 利用 on 绑定多个事件（相同事件处理程序）
📕 给元素绑定多个事件，相同事件处理程序的格式：空格隔开
$('div').on('mouseover mouseout',function(){})
案例：我们给 div 绑定多个事件，相同的事件处理程序：
<div></div>
<script>
$('div').on('mouseover mouseout',function(){
$(this).toggleClass('current')
})
</script>
📮 1.3 利用 on 事件委派
💹 所谓事件委派就是利用冒泡来通过父节点来影响子节点，例如我们有一个 ul 里面有 多个 li，我们要点击每个 li 都能执行事件，按照原来的思想我们会给每个 li 绑定一个点击事件，这样就需要多次绑定事件，太繁琐了，我们利用事件委派，只给 ul 绑定事件即可，点击 li 后，冒泡到 ul 身上，ul 绑定了事件，就会执行，这就是事件委派
📕 事件委派格式：括号内第二个位置写触发的元素
$('ul').on('click','li',function(){})
案例：给一个 ul 绑定事件委派，点击每个 li 都输出 ‘我被打印了’
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
<script>
$('ul').on('click','li',function(){
console.log('我被打印了');
})
</script>
📮 1.4 利用 on 给动态创建的元素绑定事件
📁 按照之前的绑定点击事件，如果我们先绑定了事件，再动态创建，那事件将不能被触发。但如果使用 on 绑定，则可以解决这一问题，on 可以给动态创建的元素绑定事件
给动态创建的 li 绑定点击事件：
<ul></ul>
<script>
$('ul').on('click','li',function(){
console.log('新创建的 li 被触发了');
})
var lis=$('<li>新创建的 li</li>')
$('ul').append(lis)
</script>
二：利用 off 解绑事件
🧺 利用 off 解绑比较简单，只有三种情况，解绑所有事件 和 解绑某个事件，还有解绑事件委派
📮 2.1 解绑所有事件
🧼 解绑所有事件只需要不写参数即可，就可以将某元素绑定过的所有事件都给取消掉
📕 解绑所有事件的格式：无参数即可
$('div').off()
案例：给 div 解绑所有事件
<div></div>
<script>
$('div').on({
click:function(){
console.log('点击事件触发了');
},
mouseover:function(){
console.log('鼠标移上去了');
},
mouseout:function(){
console.log('鼠标移走了');
}
})
$('div').off()
</script>
📮 2.2 解绑指定事件
🧼 解绑指定事件只需要将参数写为某个事件，就可以指定解绑哪个事件了
📕 解绑所有事件的格式：参数为某个事件
$('div').off(‘click’)
案例：给 div 解绑点击事件
<div></div>
<script>
$('div').on({
click:function(){
console.log('点击事件触发了');
},
mouseover:function(){
console.log('鼠标移上去了');
},
mouseout:function(){
console.log('鼠标移走了');
}
})
$('div').off('click')
</script>
📮 2.3 解绑事件委派
🧼 解绑事件委派和绑定事件委派的格式相似
📕 解绑事件委派的格式：第二个位置写会触发事件的元素
$('ul').off(‘click’，‘li’)
案例：给 ul 的 li 解绑点击事件
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
$('ul').on('click','li',function(){
console.log('我被触发了');
})
$('ul').off('click','li')
</script>
三：绑定单次触发事件
🧬 单次触发事件就是触发过一次就不能再触发的事件
📕 单次触发事件格式：
$('div').one('click',function(){}）
案例：给 div 绑定单次触发事件
<div></div>
<script>
$('div').one('click',function(){
console.log('我触发啦');
})
</script>
四：自动触发事件
🧼 自动触发事件有三种形式，大范围内分两大类：会触发默认行为与不会触发默认行为
4.1 $('ele').事件
🧼 $('ele').事件 这种自动触发事件会触发元素的默认行为，例如文本框标签，默认行为是获得焦点后光标闪烁
<input type="text">
<script>
$('input').focus();
</script>
刷新页面就触发了获得焦点事件，并且触发了元素默认行为 光标闪烁
4.2 $('ele').trigger(事件)
🧼 $('ele').trigger(事件) 也会触发元素默认行为
<input type="text">
<script>
$('input').trigger('focus');
</script>
刷新页面就触发了获得焦点事件，并且触发了元素默认行为 光标闪烁
4.3 $('ele').triggerHandler(事件)
🧼 $('ele').triggerHandler(事件) 不会触发元素默认行为，为了方便看清楚没有触发默认行为但是获得了焦点，我们在自动触发后更改表单value值，如果此时还没有光标这说明触发了事件但是没有触发默认行为
<input type="text">
<script>
$('input').triggerHandler('focus');
$('input').val('111')
</script>
看得到value改了但是没有光标，证明了该方法自动触发了事件但是没有触发元素默认行为
五：事件对象
事件对象在 jQuery 中的用法和在 原生js 中类似，均用 event 或 e 来表示，其方法也和原生中一模一样，例如 获得光标位置 e.pageX，e.pageY ，还有阻止冒泡与阻止默认行为等等，下面举例阻止冒泡为例：
我们知道 DOM 事件流会自动冒泡，点击了低级事件，会依次向上冒泡触发对应事件。
🧼 不阻止冒泡的情况：
document
<div class="father">father
<div class="son">son</div>
</div>
<script>
$(document).on('click',function(){
console.log('document冒泡了');
})
$('.father').on('click',function(){
console.log('father冒泡了');
})
$('.son').on('click',function(){
console.log('son冒泡了');
})
</script>
在不阻止冒泡的情况下，由于会自发向上级冒泡，而上级又有点击事件，所以会层层触发
🧼 阻止冒泡的情况：
document
<div class="father">father
<div class="son">son</div>
</div>
<script>
$(document).on('click',function(){
console.log('document冒泡了');
})
$('.father').on('click',function(){
console.log('father冒泡了');
})
$('.son').on('click',function(event){
event.stopPropagation();
console.log('son冒泡了');
})
阻止冒泡的情况下点击son黄色盒子，只会触发其son事件，但是由于father没有阻止冒泡，点击father盒子还是会向上冒泡
