jq事件绑定：on事件、off事件、方法函数、one事件

事件绑定：

• 事件绑定有形式有：on 、one、方法函数、off解绑事件；
• on和one的用法是一样的，但区别是on是每次点击都会触发，one是只触发一次；
• on有三种用法：普通绑定事件、事件委托、传参数；

1、on的用法：

（1）on：普通绑定事件

• 格式：选定标签.on(绑定的事件，回调函数（{要执行的代码}））
• 给ul里的li绑上点击事件：

    <ul>
        <li>111li>
        <li>222li>
        <li>333li>
    ul>
    <script>
        $("ul li").on("click",function(){
            console.log("li click")
        })
    script>

• on事件也体现着jq隐式迭代的特点，上面的代码我们给ul下面的li绑上事件，他就会一个一个都绑上事件； 

结果：点一次li就打印一次”li click“

（2）on：事件委托的作用

on的事件委托的作用就是，可以传参数指定点击对象，当点击该对象时才能触发事件；

格式：选取标签.on(事件，要点击的东西，回调函数（{要执行的代码}））

    <ul>
        <li>111
            <button>deletebutton>
        li>
        <li>222
            <button>deletebutton>
        li>
        <li>333
            <button>deletebutton>
        li>
    ul>
    <script>
        $("ul").on("click","button",function(){
            console.log("ul click")
        })
    script>

• script里面代码的含义是；当on在回调函数和事件之间传了参数，那么这个参数就表示只有当点击这个参数的时候，才能触发冒泡机制，点击这个参数，ul才会执行点击事件，你点li就没用了，不会触发ul的事件。
• 而且事件委托的机制是，当你在新加入相同的button按钮时，点击按钮就会触发ul事件，不用再去绑定，会自动给你绑定。

结果：点delete会触发ul事件，打印ul click；当点击li不会触发ul事件

（3）on--传参数的用法：

• 这个参数必须是对象；
• 如果这个参数是普通的值，那么执行的时候，它就以为是给这个参数一个委托的功能，就跟上面事件委托一样了，所以我们这里第二个参数必须是个对象；
• on里面的对象这个参数要传到回调函数里面去，就是代码中的e
• 传了参数以后就相当于点任何一个位置都能触发事件了，当然位置必须是标签身上；

    <ul>
        <li>111
            <button>deletebutton>
        li>
        <li>222
            <button>deletebutton>
        li>
        <li>333
            <button>deletebutton>
        li>
    ul>
    <script>
        $("ul").on("click",{name:"yiyi"},function(e){
            console.log(e)
        })
    script>

结果：

• 传完参数以后，现在点击ul身上的任何一个位置都能触发事件，点button行，点li也行，
• 这个对象参数就放在jq的data里面；
• 当没有事件委托时，新加的子节点是不能触发父节点的事件的；
• 但是如果加了事件委托，新加子节点可以触发父节点的事件；

（4）on--事件委托+传对象参数

• 格式：选取标签.on(事件，事件委托参数，要传到回调函数的参数，回调函数（参数）{要执行的代码}）
• 既想事件委托又想传对象参数，这个时候这个对象参数就可以不用是对象了，就可以是随意值了；
• 那么on的第二个参数是事件委托的参数，第三个是要传到回调函数里的参数；

    <ul>
        <li>111
            <button>deletebutton>
        li>
        <li>222
            <button>deletebutton>
        li>
        <li>333
            <button>deletebutton>
        li>
    ul>
    <script>
        $("ul").on("click","button","hello",function(e){
            console.log(e)
        })
    script>

结果：

• 当同时有事件委托和回调函数参数时，就不会像上面一样点ul身上的任何位置都能触发事件了，现在只有点击delete才能触发ul事件，然后参数是在data里面加着。 

 

2、常用的方法函数用法： 

• 常用的方法函数：click（）、mouseover（）、mouseout（）、blur（）、change（）
• 格式：选取标签.事件（回调函数（{}））
• 给li绑定点击事件：

    <ul>
        <li>111
            <button>deletebutton>
        li>
        <li>222
            <button>deletebutton>
        li>
        <li>333
            <button>deletebutton>
        li>
    ul>
    <script>
        $("ul li").click(function(){
            console.log("click")
        })
    script>

• 这些方法函数还可以链式用法：就是方法后面接着其他的方法

• 上面代码含义是在标签身上移动就会触发mouseover的回调函数，点击就会触发click的回调函数；

 

3、off解绑事件

• off（）：解绑所有的事件；
• off（“click”）：解绑click事件；
• off（参数1，参数2）：参数1是要解绑是事件，参数2是要解绑的处理函数；

 

4、将原生的标签转换为jq对象

• 原生的document绑定事件只能像这种形式：

• 现在用jq的事件方式，原生的document是不能用的，要把原生的document转换为document对象，才能用jq的方式获取这个节点，绑定事件；

• 将原生的document转换成document对象的方式：$(document)；
• 这个方法也同样适用于其他的将原生属性转化为jq所用的对象的格式来获取这个标签；
• 就是将普通节点转化为jquery对象；