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());//只处理一次事件,之后该事件处理方法失效。(比如按钮事件,第一次点击按钮会调用该方法处理,之后该处理方法被移出)