JQuery中4种事件绑定的区别

最新推荐文章于 2024-05-17 05:20:49 发布

cozia

最新推荐文章于 2024-05-17 05:20:49 发布

阅读量1.4w

点赞数 5

分类专栏： Jquery 事件绑定文章标签： jquery 事件绑定

本文链接：https://blog.csdn.net/cozia/article/details/52403108

版权

Jquery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

事件绑定

1 篇文章 0 订阅

订阅专栏

只要一提到JQuery事件的绑定，第一时间就会想起bind()方法。孤陋寡闻的我今天听同事提起，才来自己研究了下，发现共有四种事件绑定的方法，分别是：bind(),live(),delegate()和on()。

它们的使用方法都大同小异都是(我用Fn代表绑定事件的方法) $(selecter)Fn(event,data,fn)，还可以一对多的绑定，也就是一个Jquery对象绑定多个事件及其处理函数，如：$(selecter).Fn({event1:fn1,event2:fn2……})多事件处理我们就用Json格式来写。

我们先来看它们适用的版本：

bind()-------------------------版本号小于3.0（在Jquery3.0中已经移除，相应unbind()也移除）

live()--------------------------版本号小于1.7（在Jquery1.7中已经移除，相应die()也移除）

delegate()-------------------版本号小于1.7（在Jquery1.7中已经移除）

on()---------------------------版本号大于1.7（在Jquery1.7中添加，相应off()也添加）

除了上述方法如果你想绑定一次的话还可以用one()方法；

trigger()也有绑定事件的效果。

也就是说如果你行用最新的Jquery绑定事件只能够使用on().

下面我们来看看他们都有什么区别：

第一个最大的区别就是：bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件，是没有办法达到效果的，而其余三个可以。看例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.1.0.min.js"></script>
    <style>
        #container{
            width: 100%;
            height: 400px;
            background: thistle;
        }
        .created{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
<button id="add" type="button">add DIV</button>
<button id="del" type="button">del DIV</button>
<button id="onBtn" type="button">绑定事件</button>
<button id="offBtn" type="button">解绑事件</button>
<div id="container">
    <div class='created'>我是原生div<div/>
</div>
</body>
<script>
    $(function () {
        $("#add").click(function(){
            $("#container").prepend("<div class='created'>我是动态生成的div<div/>")
        });
        $("#del").click(function(){
            $("div").remove(".created:first")
        });
        $("#onBtn").click(function(){
            $("#container").on("click",".created",function(){
                alert(1);
            });
        });
        $("#offBtn").click(function(){
            $("#container").off("click");
        })
    })
</script>
</html>

TIPS：上面我用到的remove()方法，是$(element).remove(" id/class")

例如我要移除id名为x的div：$("div").remove("#x");

例如我要移除class名为y的第一个div：$("div").remove(".y:first");

官方用on()取缔其余三种方法的原因可能是出于性能的考虑：

bind的缺点很明显

毕竟on()方法有4个参数可选，分别是events|selecter|data|fn，其中selecter是其它绑定方法不具备的，原来我们的事件events只能委派给document，如果你需要绑定的DOM目标嵌套在很深的DOM结构中，那么让document去派发事件我想是非常不明智的，我们用on()就可以找到要绑定的目标元素的父级，并委派它事件，这样事件的派发就变得轻松很多。

第一次写东西，也并不是要教别人什么的，只是想让自己记住。

cozia

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JQuery中4种事件绑定的区别

只要一提到JQuery事件的绑定，第一时间就会想起bind()方法。孤陋寡闻的我今天听同事提起，才来自己研究了下，发现共有四种事件绑定的方法，分别是：bind(),live(),delegate()和on()。它们的使用方法都大同小异都是(我用Fn代表绑定事件的方法) $(selecter)Fn(event,data,fn)，还可以一对多的绑定，也就是一个Jquery对象绑定多个事件及其处理函
复制链接

扫一扫