jquery几种事件绑定方式的比较

  • A+

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些.

4.bind()支持Jquery所有版本;live()支持jquery1.9-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

推荐使用.on()方法绑定,原因有两点

1.on()方法可以绑定动态添加到页面元素的事件

比如动态添加到页面的DOM元素,用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来,也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate(),查看源码就会发现,它们实际上调用的都是.on()方法,并且.live()方法在jQuery1.9版本已经被移除。

  1. bind: function( types, data, fn ) {
  2.     return this.on( types, null, data, fn );
  3. },
  4. live: function( types, data, fn ) {
  5.     jQuery( this.context ).on( types, this.selector, data, fn );
  6.     return this;
  7. },
  8. delegate: function( selector, types, data, fn ) {
  9.     return this.on( types, selector, data, fn );
  10. }

移除.on()绑定的事件用.off()方法。

2.on()方法绑定事件可以提升效率

很多文章都提到了利用事件冒泡和代理来提升事件绑定的效率,大多都没列出具体的差别,所以为了求证,我做一个小测试。

假设页面添加了5000个li,用chrome开发者工具Profiles测试页面载入时间。

(事件冒泡参考 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html)

普通

  1. $('li').click(function(){
  2.     console.log(this)
  3. });

绑定过程的执行时间

普通绑定相当于在5000li上面分别注册click事件,内存占用约4.2M,绑定时间约为72ms。

.on()绑定

  1. $(document).on('click', 'li', function(){
  2.     console.log(this)
  3. })

绑定过程的执行时间

.on()绑定利用事件代理,只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。

多个事件绑定同一个函数

  1. $(document).ready(function(){
  2. $("p").on("mouseover mouseout",function(){
  3. $("p").toggleClass("intro");
  4. });
  5. });

多个事件绑定不同函数

  1. $(document).on({
  2. mouseenter: function() {
  3. // Handle mouseenter...
  4. },
  5. mouseleave: function() {
  6. // Handle mouseleave...
  7. },
  8. click: function() {
  9. // Handle click...
  10. }
  11. }, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');

用on()方法绑定多个选择器,多个事件则可以这样写:

  1. $(document).on({
  2. mouseenter: function() {
  3. // Handle mouseenter...
  4. },
  5. mouseleave: function() {
  6. // Handle mouseleave...
  7. },
  8. click: function() {
  9. // Handle click...
  10. }
  11. }, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');

绑定自定义事件

  1. $(document).ready(function(){
  2. $("p").on("myOwnEvent"function(event, showName){
  3. $(this).text(showName + "! What a beautiful name!").show();
  4. });
  5. $("button").click(function(){
  6. $("p").trigger("myOwnEvent",["Anja"]);
  7. });
  8. });

传递数据到函数

  1. function handlerName(event)
  2. {
  3. alert(event.data.msg);
  4. }
  5. $(document).ready(function(){
  6. $("p").on("click", {msg: "You just clicked me!"}, handlerName)
  7. });

适用于未创建的元素

  1. $(document).ready(function(){
  2. $("div").on("click","p",function(){
  3. $(this).slideToggle();
  4. });
  5. $("button").click(function(){
  6. $("<p>This is a new paragraph.</p>").insertAfter("button");
  7. });
  8. });

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

  1. $(document).ready(function(){
  2. $("p").on("click",function(){
  3. $(this).css("background-color","pink");
  4. });
  5. $("button").click(function(){
  6. $("p").off("click");
  7. });
  8. });

在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。将click事件绑定在document对象上,页面上任何元素发生的click事件都冒泡到document对象上得到处理。

weinxin
我的微信
这是我的微信扫一扫
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  1

    • avatar 小猪麦兜 Admin

      很不错的网站奥 :grin: