关于jquery中的bind()、live()、delegate()的区别分析浅析-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

关于jquery中的bind()、live()、delegate()的区别分析浅析

近来在研究JS的时候,小码哥又一次看到jquery中常见的几种绑定事件的方法:bind(),live(),delegate()。因此,闲来无事,想把他们几个做一下系统的分析,一遍后面的码农们能够一起分享!

创新互联专业为企业提供鄢陵网站建设、鄢陵做网站、鄢陵网站设计、鄢陵网站制作等企业网站建设、网页设计与制作、鄢陵企业网站模板建站服务,十余年鄢陵做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

先说好,鄙人也算是JS的初学者,很复杂的模块啥的,也是略懂而已,要是有码神看到,可别Ma我哈!!

那好,下面就直接进入主题了~

首先,分别介绍一下这三个方法:

1、bind()——$(selector).bind(event,data,function);

    event 为必需,规定添加到元素上的一个或多个事件,由空格分隔多个事件,必需是有效事件

    data  可选,规定传递到函数的额外数据,一般用不到

    function  必需,规定当事件发生时运行的函数。

实例:

    $("button").bind("click",function(){

        $("p"),slideToggle();//slideToggle()方法是鼠标点击切换

    })

还可以对同一个元素添加多个事件:$(selector).bind(event:function,event:function,....);

    $(document).ready(function(){

        $("button").bind(click:function(){

            $("p").slideToggle();

        },

        mouseover:function(){

            $("body").css({'background','red';})

        },

        mouseout:function(){

            $("body").css('background','#fff');

        });

    });

2、live()——$(selector).live(event,data,function);

    event 为必需,规定添加到元素上的一个或多个事件,由空格分隔多个事件,必需是有效事件

    data  可选,规定传递到函数的额外数据,一般用不到

    function  必需,规定当事件发生时运行的函数。

实例:

    $("button").live("click",function(){

        $("p").slideToggle();

    })

    live()方法有一个好处就是可以为HTML还不存在(即由JS脚本临时创建的新元素上添加事件)

3、delegate()——$(selector).delegate(childSelector,event,data,function);

    childSelector  必需,规定要附加事件处理程序的一个或多个子元素。

    event  必需,规定附加到元素上的一个或多个事件。

    由空格分隔多个事件值,必需是有效事件。

    data 可选,规定传递到函数的额外数据。

    function 必需,规定当事件发生时运行的函数。

    delegate()方法同样可以为HTML还不存在(即由JS脚本临时创建的新元素上添加事件)。

实例:

    $('div').delegate('button','click',function(){

        $("p").slideToggle();

    })

下面就来分析一下他们的异同:

首先,单看简单的针对某个元素进行事件绑定,他们之间貌似没有多少区别,都可以实现简单的事件绑定,且他们都是遵循事件冒泡(事件传播)方式查询要绑定事件的元素。

但bind()方法,却不能像live()和delegate()方法那样,为未来(即由JS脚本新生成和创建的元素)添加事件绑定。bind()方法只能对HTML中已经存在的元素添加绑定事件。

live()方法有一个最大的缺点,就是它仅能针对直接的CSS选择器做操作,这使得它变得非常不灵活。

在live()和delegate()之间,唯一的差别就在于它们在对要绑定事件的元素的获取速度上有差异。在事件传播上,后者要比前者的速度更快一点,只因后者的限制条件更精准一些。这可以从它们的绑定事件的结构来看出来。

鉴于以上分析,我们更倾向于live()和delegate()方法。而这两者,有倾向与后者。

但,对于停止事件传播来说,bind()方法会高效而直接。因此,我们平时用来阻止事件传播时,会选择bind()方法:

$('a').bind('click',function(e){

    e.preventDefault();

    e.stopPropagation();

});

只因其他两种方法由于事件冒泡而耽误了时间。


文章名称:关于jquery中的bind()、live()、delegate()的区别分析浅析
当前路径:http://kswsj.cn/article/ppcscs.html

其他资讯