jQuery高级事件



1. 操作模拟

   1、trigger()

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

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

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

额外数据获取

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

      alert(data1+"~"+data2);

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

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

   $('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');

2、triggerHandler()

与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');

//出现3次alert

 

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

      alert('hello');

   });

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

//出现一个alert

1. 命名空间

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

    alert("abc");});

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

    alert("efg");});

 

   例如：当我们想要移除alert为abc的click时，移除的方法只有   $('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.type和event.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. on、off和one

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

   普通绑定：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');

   });

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