关闭

jQuery高级事件

105人阅读 评论(0) 收藏 举报
分类:

  1. 操作模拟

    1trigger()

      不是人为的去点击,而是模拟人去点击。例如,当页面加载完成后,自动触发按钮操作

$('input').click(function(){alert("click!");});

$('input').trigger('click');

额外数据获取

     $('input').click(function(e,data1,data2){

      alert(data1+"~"+data2);

      }).trigger('click',['123','456']);

      页面加载完成后自动弹出123~456trigger额外数据只有一条时候可以省略中括号,多条时不可省略

   $('input').click(function(e,data1,data2,data3,data4){   alert(data1+"~"+data2+"~"+data3[3]+"~"+data4.user);

 }).trigger('click',['123','456',['a','b','c','d'],{'user':'Lee'}]);

也可以通过自定义的事件触发

 

//自定义触发

$('input').bind('myEvent',function(){

      alert('hello');

     }).trigger('myEvent');

2triggerHandler()

trigger()用法一样,只是添加了一些方法。

  $('input').click(function(){

    alert("qqqqqqqqq!!!!");

}).triggerHandler('click');

trigger()的区别

(1)、不会执行默认事件

$('form').triggerHandler('submit');//不执行默认事件,提交后不跳转到另一个页面

$('form').trigger('submit');//执行默认事件,跳转到另一个页面

(2)triggerHandler()只是执行第一个元素,trigger()执行所有的元素

(3)trigger()返回的是jQuery对象,可以实现连缀

triggerHandler()返回return值或undefined

(4)trigger()在创建事件时会冒泡,但这种冒泡在自定义事件中才能体现出来;而triggerHandler()则不会冒泡

 

<div class="d1">

<div class="d2">

<div class="d3">

div

</div>

</div>

</div>

 

   $('div').bind('myEvent',function(){

      alert('hello');

   });

   $('.d3').trigger('myEvent');

//出现3alert

 

   $('div').bind('myEvent',function(){

      alert('hello');

   });

   $('.d3').triggerHandler('myEvent');

//出现一个alert

  1. 命名空间

   $('input').bind('click',function(){

    alert("abc");});

   $('input').bind('click',function(){

    alert("efg");});

 

   例如:当我们想要移除alertabcclick时,移除的方法只有   $('input').unbind('click');这样  两个click都移除了,不符合要求,因此可以用命名空间来解决问题

 

     $('input').bind('click.abc',function(){

    alert("abc");

});

     $('input').bind('click.efg',function(){

    alert("efg");});

移除: $('input').unbind('click.abc');

如此只移除了abc,并没有移除efg

也可以直接用(.abc),可以移除相同命名空间的不同事件。

trigger()triggerHandler()也可以使用命名空间

$(‘input’).trigger(‘click.abc’);

  1. 事件委托

    1

    <div id="box">

    <input type="button"  class="button" value="按钮">

    <input type="button"  class="button" value="按钮">

    <input type="button"class="button"  value="按钮">

    </div>

 

//事件不委托,绑定了3个事件

   $('.button').live(function(){

      alert("aaaaa");

   });

 

//事件委托,绑定了1个事件,live绑定的不是button,绑定的是document,永远只会绑定一个事件

   $('.button').live(function(){

      alert("aaaaa");

   });

2、动态绑定功能

//不能动态绑定

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

      $(this).clone().appendTo('#box');

   });

//live可以动态绑定,因为事件绑定在document

//live实际上是绑定在document,而点击button实际上是冒泡到document上,并且点击document时,需要验证event.typeevent.target才能出发

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

      $(this).clone().appendTo('#box');

   });

注意:live()不支持连缀调用

die()可以结束live()

由于live()存在很多问题,需要一层一层向上冒泡,复杂冗长,因此jQuery给我们提供了 一个更好的方法delegate()代替live()

$('#box').delegate('.button','click',function(){

      $(this).clone().appendTo('#box');

});

//语义清楚,绑定的为父元素,id=box,对button执行操作,click事件

$('#box').undelegate('.button','click');

//删除绑定

 

当有很多元素需要事件绑定时,建议使用事件委托

  1. onoffone

    总结一下以上学到的几种方法:

    普通绑定:bind   普通解绑:unbind

    事件委托:live(),delegate()   解除事件委托:die(),undelegate()

    在新版jQuery()中提供了新的方法:

    绑定:on()

    解绑:off()

   $('.button').on('click',{user:'lee'},function(e){

      alert(e.data.user);

      //alert('qqq');

});

//on代替普通绑定

 

 

$('.button').on('mouseover mouseout',function(){

      alert("1111");

});

 

   $('.button').on({

        mouseover:function(){

           alert("over!!!!!!");

        },mouseout:function(){

           alert("out!!!!!!!!");

      }});

//on代替普通的多事件绑定

 

   $('#box').on('click','.button',function(){

      $(this).clone().appendTo('#box');

});

//on代替live()delegate()d的事件委托

 

$('form').on('submit',function(){

      return false;});

也可以写成$('form').on('submit',false);

//阻止了默认行为和冒泡行为

 

   $('#box').off('click','.button');

//移除委托事件

off用法与unbind相同

 

one:绑定元素执行完毕后,执行自动移除事件,该方法可以用于只触发一次的事件

   $('.button').one('click',function(){

      alert("only one");

   });

//只触发一次,警示框只弹出一次

$('#box').one('click','.button',function(){

      $(this).clone().appendTo('#box');

   });

//委托事件,按钮只能复制一次,只能执行一次

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9258次
    • 积分:630
    • 等级:
    • 排名:千里之外
    • 原创:56篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类