jQuery--高级事件

http://edu.51cto.com/lesson/id-14478.html

一、模拟操作

模拟用户出发按钮的操作：.trigger()和.triggerHandler()

注册按钮事件：

//点击按钮事件
$('input').click(function () {
alert('我的第一次点击来自模拟！');
});

//模拟用户点击行为

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

//合并注册和点击行为

$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).trigger('click');

传递多个参数：

$('input').click(function (e, data1, data2) {
alert(data1+", "+data2.key);
}).trigger('click', ['abc', {key: 'value'}]);

//自定义事件

$('input').bind("myEvent",function () {
alert('myEvent occurred');
}).trigger('myEvent');

.trigger()方法的简写方案：如.trigger('click');可简写成.click();

$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).triggerHandler('click');

.trigger()和.triggerHandler()的区别：

1、triggerHandler并不会触发事件的默认行为，而trigger会触发；

2、triggerHandler只会调用第一个匹配到的元素的事件方法，而trigger会调用所有匹配的元素的事件方法；

3、triggerHandler返回当前事件执行的返回值，如果没有返回值则返回undefined；而trigger返回当前包含事件触发元素的jQuery对象（方便链式连缀调用）；

4、trigger在创建事件的时候会冒泡； triggerHandler不会冒泡；

二、命名空间

用途：用于解决移出同名同元素绑定的事件。

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

alert('abc');

});

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

alert('xyz');

});

//移出click事件中命名空间为.abc的事件处理函数

$('input').unbind('click.abc');

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

三、事件委托

背景：html中事件存在冒泡行为，及从最底层向最高层传递。所以父元素可以获得子元素的事件，而通过event.type和event.target可以知道是哪个子元素产生的什么类型的事件。

应用该机制，可以在html中通过将事件委托给指定父元素的方式，实现对其所有特定类型的子元素注册特定类型的事件。

使用方法：

$('#box').delegate('.targetClass', 'click', function() {});//ID为box的元素，代理执行类型为targetClass的子元素的click事件。

$('#box').undelegate('.targetClass', 'click');//取消ID为box的元素对类型为targetClass的子元素的click事件的代理。

注意：

1、delegate需要指定父元素，第一个参数是当前元素，第二个参数是事件类型，第三个参数是处理函数；

2、undelegate和unbind一样可以直接删除所有事件，使用undelegate('click')删除所有click事件；也可以删除命令空间的事件，如undelegate('click.abc')删除.abc的click事件；

使用范围：

1、在DOM中大量元素需要绑定相同事件；

2、在DOM中尚不存在即将生成的元素绑定事件；

四、on/off/one

这三个方法用于取代方法：bind()/unbind(), live()/die(), delegate()/undelegate().

//

$('.button').on('click', function(){});

$('.button').on('click mouseover', {user:'alan'}, function(){});//绑定多个事件，指定额外数据

$('.button').on({

'click': function(){},

'mouseover': function(){},

});//以对象形式绑定多个事件

$('.button').on('submit', function(){ return false});//阻止默认行为并取消冒泡

$('.button').on('click', false);//阻止默认行为并取消冒泡

$('.button').off('click');//取消所有click处理方法

$('.button').off('click', fn);//unbind，取消特定处理方法fn

$('.button').off('click.abc');//取消命名空间

$('#box').on('click', '.button', function());//替代live/delegate，事件委托

$('#box').off('click', '.button');//替代die/undelegate，取消事件委托

$('#box').one('click', '.button', function());//只处理一次事件，之后该事件处理方法失效。(比如按钮事件，第一次点击按钮会调用该方法处理，之后该处理方法被移出)