20-Javaweb学习-高级事件- trigger、triggerHandler、on off one
高级事件
浏览器一打开自动触发我们绑定的事件
$(function() {
$('button').bind('click', function() {
alert("点击了");
});
$(‘button’).trigger(‘click’); //浏览器一打开自动触发该点击事件
以上两步可以合写在一起如下
/*
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
*/
});高级事件2
Trigger 传递数据
$('button').bind('click', function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name);
}).trigger('click',['abc',[2,3],{name:'hello'}]);
//注意多个数据用[ ] 括起来,data1 ,data2,data3 指的就是[ ]中的数据
那么bind在绑定事件的时候也能传递数据,这里要跟trigger传递的数据区分一下
如果是bind传递的数据我们用事件对象e中的data属性取数据
$('button').bind('click',{age:'23'},function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name+"和bind中传递的数据要用事件对象e中的data属性去取"+e.data.age);
}).trigger('click',['abc',[2,3],{name:'hello'}]);高级事件3之自定义事件
$('button').bind('myEvent',function(){
alert('自定义事件');
}).trigger('myEvent');高级事件4 之trigger简写方案
.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个空的同名事件即可。
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
//上面的可以简写为如下的:
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).click(); //空的 click()执行的是 trigger()
这种便捷的方法，jQuery 几乎个所有常用的事件都提供了。
blur focusin mousedown resize
change focusout mousenter scroll
click keydown mouseleave select
dblclick keypress mousemove submit
error keyup mouseout unload
focus load mouseover
//注意为了语义性更加好,一般不推荐简写方案,当然你要使用也是没有问题的高级事件5之triggerHandler()
jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用和.trigger()方法一样。
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).triggerHandler('click');
在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以可以传递额外参数。但在某些特殊情况下，就产生了差异高级事件6trigger和triggerHandler的区别
区别1:
1..triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。
<form action="123.html" method="get">
<input type="submit" value="提交" />
</form>
$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为
如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为
}).trigger('submit');高级事件7 trigger和triggerHandler的区别
区别2..triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。
例如:我给三个按钮都设置了点击事件 用trigger会弹三次 用triggerHandler只弹一次
<body>
<button>一个按钮</button>
<button>一个按钮</button>
<button>一个按钮</button>
</body>
$('button').bind('click',function(){
alert(‘弹了’);//弹三次
}).trigger('click');
$('button').bind('click',function(){
alert(‘弹了’); //弹一次
}). triggerHandler('click');高级事件8 trigger和triggerHandler的区别
区别3..triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
$('button').bind('click',function(){
alert("弹了");
}).trigger(‘click’).css({‘background’:‘red’});//返回的是这个按钮对象可以连调
alert($('input').click(function () {
return 123;
}).triggerHandler('click')); //返回 123，没有 return 返回高级事件9 trigger和triggerHandler的区别
4..trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是
jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。
<body>
<div>
<div>一个按钮</div>
</div>
</body>
$('div').bind('myEvent', function() {
alert(“div弹了”); //不会冒泡弹一次
}).triggerHandler('myEvent');
$(function() {
$('div').bind('myEvent', function() {
alert(“div弹了”);//会冒泡 弹三次
}).trigger('myEvent');
});高级事件10 on off one
目前绑定事件和解绑的方法 在 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃bind()和unbind()。
老方式 绑定事件 bind() 新方式 on()
老方式 解绑事件 unbind() 新方式 off()
以后推荐使用新方式来绑定和解绑事件
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});高级事件11新方式 on off one
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
高级事件12 on off one
//替代.bind()方式，阻止默认行为并取消冒泡
$(‘form’).on(‘submit’, function () {
return false;//返回false 阻止默认行为和冒泡行为
});
或
$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');高级事件13 one
One 表示事件执行一次
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
例子:事件委托 給button的父元素 设置点击事件,让里面动态生成的子元素也具有点击事件
<div id="box">
<button>一个按钮</button>
</div>
//on普通事件委托
$('#box').on('click', 'button', function () {
$(this).clone().appendTo('#box');
});
//取消事件委托
$('#box').off('click', 'button');