内容提纲：
1.模拟操作
2.命名空间
3.事件委托
4.on、off 和 one
发文不易，转载请注明出处！
一．模拟操作
在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去点击。
//点击按钮事件
$(\'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\']);
PS：当传递一个值的时候，直接传递即可。当两个值以上，需要在前后用中括号包含起来。但不能认为是数组形式，下面给出一个复杂的说明：
$(\'input\').click(function (e, data1, data2) {
alert(data1.a + \',\' + data2[1]);
}).trigger(\'click\', [{\'a\' : \'1\', \'b\' : \'2\'}, [\'123\',\'456\']]);
除了通过 JavaScript 事件名触发，也可以用于自定义的事件触发，所谓自定义事件其实就是一个被.bind()绑定的任意函数。自定义事件无法单独执行，但是可以通过trigger模拟执行。示例如下：
$(\'input\').bind(\'myEvent\', function () {
alert(\'自定义事件！\');
}).trigger(\'myEvent\');
.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个空的同名事件即可。
$(\'input\').click(function () {
alert(\'我的第一次点击来自模拟！\');
}).click(); //执行空的click()模拟用户行为
这种便捷的方法，jQuery 几乎个所有常用的事件都提供了。
jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用和.trigger()方法一样。
$(\'input\').click(function () {
alert(\'我的第一次点击来自模拟！\');
}).triggerHandler(\'click\');
在常规的使用情况下，与trigger()几乎没有区别，都是模拟用户行为，也可以传递额外参数。但在某些特殊情况下仍有差异，主要有以下四点：
1. .triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。
$(\'form\').trigger(\'submit\'); //模拟用户执行提交，并跳转到执行页面
$(\'form\').triggerHandler(\'submit\'); //模拟用户执行提交，并阻止的默认行为
如果我们希望使用.trigger()来模拟用户提交， 并且阻止事件的默认行为， 则需要这么写：
$(\'form\').submit(function (e) {
e.preventDefault(); //阻止默认行为
}).trigger(\'submit\');
2. .triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。
3. .triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便连缀调用)。
alert($(\'input\').click(function () {
return 123;
}).triggerHandler(\'click\')); //返回 123，没有 return 返回undefined
4. .trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。
示例：
html部分代码：
1 <div class="d1"> 2 3 <div class="d2"> 4 5 <div class="d3"> 6 7 div 8 9 </div> 10 11 </div> 12 13 </div>
JS代码部分：
1 $(\'div\').bind(\'myEvent\', function () { 2 3 alert(\'自定义事件！\'); 4 5 }) 6 7 8 $(\'.d3\').trigger(\'myEvent\'); //会冒泡，有3个输出 9 10 11 $(\'div\').bind(\'myEvent\', function () { 12 13 alert(\'自定义事件！\'); 14 15 }) 16 17 18 $(\'.d3\').triggerHandler(\'myEvent\'); //不会冒泡，只有1个输出
二．命名空间
有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。
$(\'input\').bind(\'click.abc\', function () {
alert(\'abc\');
});
$(\'input\').bind(\'click.xyz\', function () {
alert(\'xyz\');
});
$(\'input\').unbind(\'click.abc\'); //移除 命名为abc的click 事件
PS：也可以直接使用(\'.abc\')，这样的话，可以移除相同命名空间的不同事件。对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。
$(\'input\').trigger(\'click.abc\');
三．事件委托
//HTML 代码部分
1 <div style="background:red;width:200px;height:200px;" id="box"> 2 <input type="button" value="按钮" class="button" /> 3 </div> 4 5
//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成
$(\'.button\').bind(\'click\', function () {
$(this).clone().appendTo(\'#box\');
});
//使用.live()具备动态绑定功能，jQuery1.3 使用，jQuery1.7 之后废弃，jQuery1.9 删除。
$(\'.button\').live(\'click\', function () {
$(this).clone().appendTo(\'#box\');
});
PS：.live()原理就是把 click 事件绑定到祖先元素$(document)上，而只需要给$(document)绑定一次即可，而非多次。然后就可以处理后续动态加载的按钮的单击事件。在接受任何事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，如果 click事件是.button，那么就执行委托给它的处理程序。1.9版本之后.live()方法已经被删除，无法使用了。需要测试使用的话，需要引入向下兼容插件。
//.live()无法使用链接连缀调用，因为参数的特性导致
$(\'#box\').children(0).live(\'click\', function () {
$(this).clone().appendTo(\'#box\');
});
在上面的例子中，我们使用了.clone()克隆。其实如果想把事件行为复制过来，我们只需要传递 true 即可：.clone(true)。这样也能实现类似事件委托的功能，但原理却截然不同。一个是复制事件行为，一个是事件委托。而在非克隆操作下，此类功能只能使用事件委托。如下：
$(\'.button\').live(\'click\', function () {
$(\'<input type="button" value="复制的" class="button" />\').appendTo(\'#box\');
});
当我们需要停止事件委托的时候，可以使用.die()来取消掉。
$(\'.button\').die(\'click\');
由于.live()和.die()在 jQuery1.4.3 版本中废弃了， 之后推出语义清晰、 减少冒泡传播层次、又支持连缀调用方式的方法： .delegate()和.undelegate()。 但这个方法在 jQuery1.7 版本中被.on()方法整合替代了。
$(\'#box\').delegate(\'.button\', \'click\', function () { //注意绑定的元素和参数的顺序
$(this).clone().appendTo(\'#box\');
});
$(\'#box\').undelegate(\'.button\',\'click\');
//支持连缀调用方式
$(\'div\').first().delegate(\'.button\', \'click\', function () {
$(this).clone().appendTo(\'div:first\');
});
PS：.delegate()需要指定父元素，然后第一个参数是当前元素，第二个参数是事件方式， 第三个参数是执行函数。 和.bind()方法一样， 可以传递额外参数。 .undelegate()和.unbind()方法一样可以直接删除所有事件，比如：.undelegate(\'click\')。也可以删除命名空间的事件，比如：.undelegate(\'click.abc\')。
PS：.live()和.delegate()和.bind()方法一样都是事件绑定，那么区别也很明显，用途上遵循两个规则：1.在 DOM 中很多元素绑定相同事件时；2.在 DOM 中尚不存在即将生成的元素绑定事件时；我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定。
四．on、off 和 one
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，为此 jQuery1.7版本以后推出了.on()和.off()方法彻底摒弃前面三组。
//替代.bind()方式
$(\'.button\').on(\'click\', function () {
alert(\'替代.bind()\');
});
//替代.bind()方式，并使用额外数据和事件对象
$(\'.button\').on(\'click\', {user : \'Lee\'}, function (e) {
alert(\'替代.bind()\' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$(\'.button\').on(\'mouseover mouseout\', function () {
alert(\'替代.bind()移入移出！\');
});
//替代.bind()方式，以对象模式绑定多个事件
$(\'.button\').on({
mouseover : function () {
alert(\'替代.bind()移入！\');
},
mouseout : function () {
alert(\'替代.bind()移出！\');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$(\'form\').on(\'submit\', function () {
return false;
});
或
$(\'form\').on(\'submit\', false); //直接传递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\');
//替代.live()和.delegate()，事件委托
$(\'#box\').on(\'click\', \'.button\', function () {
$(this).clone().appendTo(\'#box\');
});
//替代.die()和.undelegate()，取消事件委托
$(\'#box\').off(\'click\', \'.button\');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。
//类似于.bind()只触发一次
$(\'.button\').one(\'click\', function () {
alert(\'one 仅触发一次！\');
});
//类似于.delegate()只触发一次
$(\'#box).one(\'.button\', \'click\', function () {
alert(\'one 仅触发一次！\');
});
For my lover,
and thank you Mr.Lee!