jquery新的绑定事件机制on方法的使用情势,jQuer

作者: 网络应用  发布:2019-09-11

浏览jQuery的deprecated列表,发现live()和die()在在那之中了,赶紧看了一晃,开掘从jQuery1.7方始,jQuery引进了斩新的平地风波绑定机制,on()和off()多个函数统一处总管件绑定。因为以前有 bind(), live(), delegate()等办法来处监护人件绑定,jQuery从性质优化以及艺术统一方面思索决定推出新的函数来统一事件绑定方法并且替换掉此前的办法。

浏览jQuery的deprecated列表,发掘live()和die()在中间了,赶紧看了一晃,开掘从jQuery1.7初始,jQuery引入了斩新的事件绑定机制,on()和off()多个函数统一处总管件绑定。因为从前有 bind(), live(), delegate()等措施来处总管件绑定,jQuery从品质优化以及艺术统一方面思考决定生产新的函数来统一事件绑定方法况且替换掉从前的章程。

on(events,[selector],[data],fn)

on(events,[selector],[data],fn) 
events:一个或多少个用空格分隔的风浪类型和可选的命名空间,如"click"或"keydown.myPlugin" 。 
selector:贰个挑选器字符串用于过滤器的触及事件的精选器成分的后裔。若是接纳器为null或简捷,当它达到选定的因素,事件三翻五次触发。 
data:当三个风浪被触发时要传送event.data给事件管理函数。 
fn:该事件被触发时施行的函数。 false 值也足以做一个函数的简写,再次来到false。 
替换bind() 
当第二个参数'selector'为null时,on()和bind()其实在用法上基本上未有别的区别了,所以大家能够以为on()只是比bind()多了多个可选的'selector'参数,所以on()能够足够方便的替换掉bind()

events:贰个或多少个用空格分隔的风云类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个增选器字符串用于过滤器的触及事件的选择器成分的子孙。倘诺选择器为null或简捷,当它到达选定的因素,事件三番两回触发。
data:当一个事件被触发时要传送event.data给事件管理函数。
fn:该事件被触发时推行的函数。 false 值也得以做三个函数的简写,再次回到false。

替换live() 
在 1.4事先相信我们万分欣赏使用live(),因为它能够把事件绑定到眼下以及后来增多的要素上边,当然在1.4随后delegate()也足以做类似的事体了。live()的规律很简单,它是因此document进行事件委派的,由此咱们也得以行使on()通过将事件绑定到document来完结live()一样的作用。

替换bind()
当第叁个参数'selector'为null时,on()和bind()其实在用法上海高校都并没有别的差异了,所以我们可以以为on()只是比bind()多了一个可选的'selector'参数,所以on()能够十三分便于的轮换掉bind()

live()写法

替换live()
在 1.4事先相信我们特别欣赏使用live(),因为它能够把事件绑定到最近以及随后增加的要素上边,当然在1.4随后delegate()也足以做类似的作业了。live()的规律很轻便,它是由此document进行事件委派的,因而大家也得以运用on()通过将事件绑定到document来达成live()同样的法力。

        $('#list li').live('click', '#list li', function() { 
          //function code here. 
        }); 
on()写法

live()写法

        $(document).on('click', '#list li', function() { 
          //function code here. 
        }); 
此地的基本点便是第三个参数'selector'在起效果了。它是多个过滤器的职能,只有被入选成分的后裔成分才会触发事件。

复制代码 代码如下:

替换delegate() 
delegate() 是1.4引进的,指标是经过祖先成分来代劳委派后代元素的风浪绑定难点,某种程度上和live()优点相似。只可是live()是因而document成分委派,而delegate则能够是不管三七二十一的祖宗节点。使用on()实现代理的写法和delegate()基本一致。

$('#list li').live('click', '#list li', function() {
  //function code here.
});

delegate()的写法

on()写法

        $('#list').delegate('li', 'click', function() { 
          //function code here. 
        }); 
on()写法

复制代码 代码如下:

        $('#list').on('click', 'li', function() { 
          //function code here. 
        }); 
诚如第叁个和第二个参数的依次颠倒了一晃,别的基本一致。

$(document).on('click', '#list li', function() {
  //function code here.
});

总结 
jQuery 推出on()的目标有2个,一是为了统一接口,二是为着加强性能,所以从今天开端用on()替换bind(), live(), delegate吧。尤其是绝不再用live()了,因为它曾经处在不引入应用列表了,随时会被干掉。如果只绑定三遍事件,那随着用one()吧,那一个从未变动。

此地的主要就是第4个参数'selector'在起效果了。它是贰个过滤器的效应,唯有被入选成分的后代成分才会触发事件。

替换delegate()
delegate() 是1.4引进的,指标是透过祖先成分来代劳委派后代成分的平地风波绑定难点,某种程度上和live()优点相似。只然而live()是经过document成分委会派,而delegate则足以是即兴的古人节点。使用on()完成代理的写法和delegate()基本一致。

delegate()的写法

复制代码 代码如下:

$('#list').delegate('li', 'click', function() {
  //function code here.
});

on()写法

复制代码 代码如下:

$('#list').on('click', 'li', function() {
  //function code here.
});

一般第七个和第三个参数的逐个颠倒了一下,别的基本同样。

总结
jQuery 推出on()的指标有2个,一是为了统一接口,二是为了增加品质,所以从今后起来用on()替换bind(), live(), delegate吧。尤其是不用再用live()了,因为它曾经处于不引入应用列表了,随时会被干掉。假诺只绑定三次事件,这随着用one()吧,这一个从未变动。

你或者感兴趣的稿子:

  • jquery绑定事件不奏效的消除格局
  • jQuery中的bind绑定事件与文本框改换事件的一时消除措施
  • jQuery幸免重复绑定事件的化解办法
  • jQuery中on绑定事件后吸引的事件冒泡难点怎么化解
  • Jquery on方法绑定事件后实行多次的化解措施
  • 浅谈jQuery绑定事件会附加的化解办法和体会计算
  • 缓和jquery appaend成分中id绑定事件失效的主题材料
  • jQuery给动态增加的成分绑定事件的办法
  • JQuery中绑定事件(bind())和移除事件(unbind())
  • JQuery 绑定事件时传递参数的完成格局
  • jQuery动态添英镑素不能触及绑定事件的减轻形式剖析

本文由王中王开奖结果发布于网络应用,转载请注明出处:jquery新的绑定事件机制on方法的使用情势,jQuer

关键词: