第 10 章 高级事件

一．模拟操作 在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后 自行点击一个按钮触发一个事件，而不是用户去点击。 //点击按钮事件
$('input').click(function(){
   alert('我的第一次点击来自模拟！');
});
//模拟用户点击行为
$('input').trigger('click');

 

//可以合并两个方法
$('input').click(function(){
alert('我的第一次点击来自模拟！');
}).trigger('click');

有时在模拟用户行为的时候，我们需要给事件执行传递参数，这个参数类似与 event.data 的额外数据，可以可以是数字、字符串、数组、对象。 $('input').click(function(e,data1,data2){
   alert(data1+','+data2);
}).trigger('click',['abc','123']);
注意：当传递一个值的时候，直接传递即可。当两个值以上，需要在前后用中括号包含 起来。但不能认为是数组形式，下面给出一个复杂的说明。

$('input').click(function(e,data1,data2){
alert(data1.a+',' +data2[1]);
}).trigger('click',[{'a' :'1','b':'2'},['123','456']]);

除了通过 JavaScript 事件名触发，也可以通过自定义的事件触发，所谓自定义事件其实 就是一个被.bind()绑定的任意函数。 $('input').bind('myEvent',function(){
alert('自定义事件！');
}).trigger('myEvent');

.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个 空的同名事件即可。
$('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
jQuery 还提供了另外一个模拟用户行为的方法：
.triggerHandler()；这个方法的使用 和.trigger()方法一样。
$('input').click(function(){
alert('我的第一次点击来自模拟！');
}).triggerHandler('click');

在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以可以传递额外参 数。但在某些特殊情况下，就产生了差异： 1..triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。
$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为 提交后没有跳转 提交后默认行为被阻止
如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：
$('form').submit(function(e){
e.preventDefault(); //阻止默认行为
}).trigger('submit');

2..triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。

<input type='button'/>
<input type='button'/>
<input type='button'/>
$('input').click(function(){
  alert('我的第一次点击来自模拟！');
}).click(); 
//弹出来三次
$('input').click(function(){ 
  alert('我的第一次点击来自模拟！');
}).triggerHandler('click');
//只弹出来一次 

3..triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回 undefined；
而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
alert($('input').click(function(){
return123;
}).triggerHandler('click'));
//返回 123，没有 return 返回
4..trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是 jQuery 扩展于 DOM 的机制，并非 DOM 特性。
而.triggerHandler()不会冒泡。

<div class='d1'>

  <div class='d2'>

    <div class='d3'>

     121111

    </div>

  </div>

</div>
varindex=1;
$('div').bind('myEvent',function(){
  alert('自定义事件'+index); index++;
});
$('.div3').trigger("myEvent");//会冒泡
$('.div3').triggerHandlerr("myEvent");//会冒泡

二．命名空间 有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个 时候，可以使用事件的命名空间解决。 $('input').bind('click.abc',function(){ alert('abc'); });
$('input').bind('click.xyz',function(){ alert('xyz'); });
$('input').unbind('click.abc'); //移除 click 实践中命名空间为 abc 的
$('input').unbind('.abc');

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

三．事件委托

在 jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素) 上，然后再进行相关处理即可。

//HTML 部分
<divstyle="background:red;width:200px;height:200px;"id="box">
  <inputtype="button"value="按钮"class="button"/>
</div>
//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成
$('.button').bind('click', function(){
  $(this).clone().appendTo('#box');
});
//使用.live()具备动态绑定功能，jQuery1.3 使用，jQuery1.7 之后废弃，jQuery1.9 删除
$('.button').live('click',function(){
  $(this).clone().appendTo('#box');
});
.live()原理就是把 click 事件绑定到祖先元素$(document)上，而只需要给$(document)绑 定一次即可，而非 2000 次。
然后就可以处理后续动态加载的按钮的单击事件。在接受任何 事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，如果 click 事件是.button，那么就执行委托给它的处理程序。.live()方法已经被删除，无法使用了。需 要测试使用的话，需要引入向下兼容插件。
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>

//普通绑定.bind
//普通解绑.unbind

//事件委托.live .delegate
//解除委托.die .undelegate

//新方法绑定.on
//新方法解绑.off

<div style="width:200px;height:200px;background:green;" id="box">
<input type="button" class="button" value="按钮" />
</div>

$('.button').on('click', function () {
alert('替代bind');
});

$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代bind' + e.data.user);
});

$('.button').on('mouseover mouseout', function (e) {
alert('移入移出');
});

$('.button').on({
mouseover : function () {
alert('移入');
},
mouseout : function () {
alert('移出');
}
});

$('form').on('submit', function () {
return false;
});

//$('form').on('submit', false);

$('.button').on('click', function () {
alert('替代bind');
});

$('.button').off('click');

//替代.live .delegate
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});

//替代.live .delegate
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
$('#box').off('click', '.button');//移出事件委托

//仅一次事件触发
$('.button').one('click', function () {
alert('仅一次事件触发！');
});

//仅一次事件触发
$('#box').one('click', '.button', function () {
$(this).clone().appendTo('#box');
});