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

最新推荐文章于 2024-04-26 16:47:03 发布

陌一一

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2k

点赞数 2

分类专栏： web前端开发文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127799557

版权

web前端开发专栏收录该内容

281 篇文章 15 订阅

订阅专栏

事件绑定：

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

1、on的用法：

（1）on：普通绑定事件

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

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

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

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

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

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

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

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

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

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

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

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

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

结果：

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

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

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

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

结果：

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

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

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

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

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

<script>
        $("ul li").click(function(){
            console.log("click")
        }).mouseover(function(){
            console.log("mouseover")
        })
</script>

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

3、off解绑事件

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

 <script>
        function A(){
            console.log("AAA")
        }
        function B(){
            console.log("BBB")
        }
        $("ul li").on("click",A).on("click",B)
        $("ul li").off("click",A)
 </script>

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

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

<script>
        document.onclick = function(){
            console.log("1111")
        }
</script>

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

<script>
    $(document).click(function(){
            console.log("1111")
          })
</script>

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

陌一一

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
jq事件绑定：on事件、off事件、方法函数、one事件

click（）、mouseover（）、mouseout（）、blur（）、change（）
复制链接

扫一扫

专栏目录