jQuery高级事件



操作模拟

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

命名空间

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

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

//删除绑定

 

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

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

  
});

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