事件绑定：
- 事件绑定有形式有：on 、one、方法函数、off解绑事件；
- on和one的用法是一样的，但区别是on是每次点击都会触发，one是只触发一次；
- on有三种用法：普通绑定事件、事件委托、传参数；
1、on的用法：
（1）on：普通绑定事件
- 格式：选定标签.on(绑定的事件，回调函数（{要执行的代码}））
- 给ul里的li绑上点击事件：
111
222
333
$("ul li").on("click",function(){
console.log("li click")
})
- on事件也体现着jq隐式迭代的特点，上面的代码我们给ul下面的li绑上事件，他就会一个一个都绑上事件；
结果：点一次li就打印一次”li click”
（2）on：事件委托的作用
on的事件委托的作用就是，可以传参数指定点击对象，当点击该对象时才能触发事件；
格式：选取标签.on(事件，要点击的东西，回调函数（{要执行的代码}））
111
delete
222
delete
333
delete
$("ul").on("click","button",function(){
console.log("ul click")
})
- script里面代码的含义是；当on在回调函数和事件之间传了参数，那么这个参数就表示只有当点击这个参数的时候，才能触发冒泡机制，点击这个参数，ul才会执行点击事件，你点li就没用了，不会触发ul的事件。
- 而且事件委托的机制是，当你在新加入相同的button按钮时，点击按钮就会触发ul事件，不用再去绑定，会自动给你绑定。
结果：点delete会触发ul事件，打印ul click；当点击li不会触发ul事件
（3）on–传参数的用法：
- 这个参数必须是对象；
- 如果这个参数是普通的值，那么执行的时候，它就以为是给这个参数一个委托的功能，就跟上面事件委托一样了，所以我们这里第二个参数必须是个对象；
- on里面的对象这个参数要传到回调函数里面去，就是代码中的e
- 传了参数以后就相当于点任何一个位置都能触发事件了，当然位置必须是标签身上；
111
delete
222
delete
333
delete
$("ul").on("click",{name:"yiyi"},function(e){
console.log(e)
})
结果：
- 传完参数以后，现在点击ul身上的任何一个位置都能触发事件，点button行，点li也行，
- 这个对象参数就放在jq的data里面；
- 当没有事件委托时，新加的子节点是不能触发父节点的事件的；
- *但是如果加了事件委托，新加子节点可以触发父节点的事件；
（4）on–事件委托+传对象参数
- 格式：选取标签.on(事件，事件委托参数，要传到回调函数的参数，回调函数（参数）{要执行的代码}）
- 既想事件委托又想传对象参数，这个时候这个对象参数就可以不用是对象了，就可以是随意值了；
- 那么on的第二个参数是事件委托的参数，第三个是要传到回调函数里的参数；
111
delete
222
delete
333
delete
$("ul").on("click","button","hello",function(e){
console.log(e)
})
结果：
- 当同时有事件委托和回调函数参数时，就不会像上面一样点ul身上的任何位置都能触发事件了，现在只有点击delete才能触发ul事件，然后参数是在data里面加着。
2、常用的方法函数用法：
- 常用的方法函数：click（）、mouseover（）、mouseout（）、blur（）、change（）
- 格式：选取标签.事件（回调函数（{}））
- *给li绑定点击事件：
111
delete
222
delete
333
delete
$("ul li").click(function(){
console.log("click")
})
- *这些方法函数还可以链式用法：就是方法后面接着其他的方法
$("ul li").click(function(){
console.log("click")
}).mouseover(function(){
console.log("mouseover")
})
- 上面代码含义是在标签身上移动就会触发mouseover的回调函数，点击就会触发click的回调函数；
3、off解绑事件
- off（）：解绑所有的事件；
- off（”click”）：解绑click事件；
- off（参数1，参数2）：参数1是要解绑是事件，参数2是要解绑的处理函数；
function A(){
console.log("AAA")
}
function B(){
console.log("BBB")
}
$("ul li").on("click",A).on("click",B)
$("ul li").off("click",A)
4、将原生的标签转换为jq对象
- 原生的document绑定事件只能像这种形式：
document.onclick = function(){
console.log("1111")
}
- 现在用jq的事件方式，原生的document是不能用的，要把原生的document转换为document对象，才能用jq的方式获取这个节点，绑定事件；
$(document).click(function(){
console.log("1111")
})
- 将原生的document转换成document对象的方式：$(document)；
- 这个方法也同样适用于其他的将原生属性转化为jq所用的对象的格式来获取这个标签；
- 就是将普通节点转化为jquery对象；
Original: https://blog.csdn.net/a1598452168YY/article/details/127799557
Author: 陌一一
Title: jq事件绑定：on事件、off事件、方法函数、one事件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/653747/
转载文章受原作者版权保护。转载请注明原作者出处！