为什么要用trigger() ?
相信刚开始接触大家也都有这样的想法：比如前台页面里有：<p id="p1">请点击这里！</p> ，你希望加载页面时就执行这个事件给这个这p绑定了click事件（将下面的代码写在$(function(){});里面）：
$("#p1").click(function(){
alert("hello!");
如果用trigger()，你就要写成这样：
$("#p1").click(function(){
alert("hello!");
}).trigger(click);
这样写不是更加麻烦了吗？可以这么说，但是用trigger()最大的好处就是它是可以传递参数进去的。例如：
//myEvent为自定义事件名
$("#p1").bind("myEvent",function(event,str1,str2) {
alert(str1 + ' ' + str2);
$("#p1").trigger("myEvent",["Hello","World"]);
也可以这样写：
$("#p1").bind("myEvent",function(event,str1,str2){
alert(str1 + ' ' + str2);
}).trigger("myEvent",["Hello","World"]);
1、trigger()
trigger()函数用于在每个匹配元素上触发指定类型的事件。
语法：$(selector).trigger(event,[param1,param2,...])
trigger()函数的返回值为jQuery类型，返回当前jQuery对象本身。
|
参数
|
描述
|
|
event
|
必需。规定指定元素要触发的事件。
可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
|
|
[
param1
,
param2
,...]
|
可选。传递到事件处理程序的额外参数。
额外的参数对自定义事件特别有用。
|
使用 Event 对象来触发事件：
语法：$(selector).trigger(eventObj)
|
参数
|
描述
|
|
eventObj
|
必需。规定事件发生时运行的函数。
|
Eg：基本触发&自定义事件
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#button1').click(function(){
alert('button1');
$('#button2').trigger('click'); //点击1的时候，触发2
$('#button2').click(function(){
alert('button2');
$("#button3").trigger("myEvent",["Hello","World!"]); //点击2的时候，触发3
$("#button3").bind("myEvent", function (event,message1, message2) { //自定义事件myevent
alert(message1 + ' ' +message2);
</script>
</head>
<body style="text-align:center;">
<divstyle="margin-top:130px;">
<buttonid='button1'>click1</button>
<buttonid='button2'>click2</button>
<buttonid='button3'>click3</button>
</body>
</html>
结果：点击button1时，先弹出内容“button1”，再弹出内容“button2”，再弹出“Hello World!”；点击button2时，先弹出内容“button2”，再弹出内容“Hello World!”；点击button3无内容弹出。
解释：代码中，给button1添加click事件，先alert('button1')，再触发button2的click事件；在button2的click事件中，先alert('button2')，再触发button3的myEvent事件，该事件是自定义事件，传入了两个参数："Hello"和"World!"；button3绑定的是自定义事件：myEvent事件，该事件要alert显示传入的参数，并中间以空格隔开，参数message1对应"Hello"，参数message2对应"World!"；button3并没有设置click事件，所以点击button3当然没有反应了。
2、triggerHandler()
triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。
语法：$(selector).triggerHandler(event,[param1,param2,...])
triggerHandler()函数的返回值为任意类型，返回触发执行的事件处理函数的返回值。
|
参数
|
描述
|
|
event
|
必需。规定指定元素要触发的事件。
|
|
[
param1
,
param2
,...]
|
可选。传递到事件处理程序的额外参数。
|
-
triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)。
-
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
-
由.triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
-
triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身。此外，如果没有处理程序被触发，则这个方法返回 undefined。
Eg1：trigger会触发事件冒泡，而triggerHandler则不会。
<!DOCTYPE html>
<metacharset="utf-8">
<title></title>
<!-- trigger会触发事件冒泡，而triggerHandler则不会。 -->
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#outA").click(function(){
alert("A");
$("#outB").click(function(){
alert("B");
$("#outC").click(function(){
alert("C");
// 使用trigger,依次C、B、A
$("#outC").trigger("click");
// 使用trigger,只会打印出C
$("#outC").triggerHandler("click");
</script>
</head>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200px;background:#0000ff;top:20px;position:relative;">
<div id="outC" style="height:100px;background:#FFB90F;top:250px;position:relative;"></div>
</body>
</html>
<meta charset="utf-8">
<title></title>
<!-- triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数，而trigger则触发所有对象的事件处理函数。 -->
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
// 给按钮绑定click事件处理函数
$("input[type=button]").click(function(event){
alert($(this).attr("id"));
// 选中的button集合中,只触发第一个button的click事件,只打印出1
// $("input[type=button]").triggerHandler("click");
// 选中的button集合中,触发所有button的click,打印出1,2,3
$("input[type=button]").trigger("click");
</script>
</head>
<input type="button" id="1" value="1" />
<input type="button" id="2" value="2" />
<input type="button" id="3" value="3" />
</body>
</html>
<title></title>
<script type="text/javascript"src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$( document).ready(function() {
$("input[type='checkbox']").bind("click",function(){
$("#test").val("www.baidu.com");
function bntClick(){
//当点击checkbox的时候，checkbox勾上并将input[type='text']赋值www.baidu.com；
//当点击 input[type='button']的时候就会发生跟点击checkbox同样的事情。
$("input[type='checkbox']").trigger("click");
//将trigger换成triggerHandler时候，当点击 input[type='button']的时候，就只会给input[type='text']赋值，而不会勾选checkbox。
//因为triggerHandler 阻止了绑定事件的元素的默认行为
//$("input[type='checkbox']").triggerHandler("click");
</script>
</head>
<input type="checkbox" />
<input type="text" id="test"/>
<input type="button" value="button" id="bnt" onclick="bntClick()"/>
</body>
</html>
<title></title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#old").click(function(){
$("input").trigger("focus");
$("#new").click(function(){
$("input").triggerHandler("focus");
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
</script>
</head>
<input type="text" />
//点击第一个按钮，文本框获得焦点且在button的后面出现文字“Focused”，1秒后文字消失。
<button id="old">trigger</button>
//点击第二个按钮，在button的后面出现文字“Focused”，1秒后文字消失，文本框不会获得焦点。
<button id="new">triggerHandler</button>
</body>
</html>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(event,a, b){
alert(a);
alert(b);
// 普通的点击事件时，a和b是undefined类型
// $("#btn").click();
// $("#btn").trigger("click",["第一个参数","第二个参数"]);
$("#btn").triggerHandler("click",["第一个参数","第二个参数"]);
//加载页面后会分别弹出字符串“第一个参数”，“第二个参数”，如果点击button，则会弹出两个undefined。因为点击button引发的是button的click方式，此时传入的参数a和b并没有实际意义，click()不能自定义参数。
</script>
</head>
<input type="button" id="btn" value="click">
</body>
</html> <script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(event,a, b){
alert(a);
alert(b);
// 普通的点击事件时，a和b是undefined类型
// $("#btn").click();
// $("#btn").trigger("click",["第一个参数","第二个参数"]);
$("#btn").triggerHandler("click",["第一个参数","第二个参数"]);
//加载页面后会分别弹出字符串“第一个参数”，“第二个参数”，如果点击button，则会弹出两个undefined。因为点击button引发的是button的click方式，此时传入的参数a和b并没有实际意义，click()不能自定义参数。
</script>
</head>
<input type="button" id="btn" value="click">
</body>
</html>
参考来源：
http://www.jb51.net/article/49164.htm
http://blog.csdn.net/aitangyong/article/details/43309467
http://www.cnblogs.com/shanlin/archive/2011/08/03/2126325.html
eg：一个经常看到的小功能，打开一张网页，一般会看到有广告层弹出，点击它可以关闭，不点击它倒计时结束会自动关闭：
我们简单实现下：倒计时5秒之后，div消失，或倒计时期间点击div，di...
使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。
以表单元素为例，使用
trigger
("submit")可以触发该表单绑定的submit事件，也会执行表单submit事件的默认行为——表单提交操作。
根据网友 @飞扬 的
2. **多状态切换**：如果你有多个状态之间的切换，而且这些状态可以同时存在，例如角色的不同动作（行走、跳跃、攻击等），你可以使用Bool
参数
为每个状态创建独立的Bool
参数
来控制它们。2. **状态切换**：当你希望从一个状态切换到另一个状态，并且这个切换只需要在特定条件下进行一次，例如从待机状态到攻击状态，你可以使用
Trigger
参数
来触发状态之间的切换。1. **持久性状态控制**：当你需要控制动画的持续状态，例如站立、行走、奔跑等，可以使用Bool
参数
。
在原生js中如果要模拟事件其实比较麻烦的事情，因为要考虑到各个浏览器对dom标准的兼容，同时还要进行多个步骤（创建event对象、初始化、正式触发等步骤）。不过
jquery
就有一个非常简单好用的click()或者
trigger
('click')方法来模拟点击事件这两个方法可以说是非常简单好用了。但是这里我其实要说的是这个方法的一点问题。问题出现的场景是：当某个元素的点击事件...
查阅资料发现：
jquery
trigger
把(type === "click" &&
jQuery
.nodeName( elem, "a" )) &&
jQuery
.acceptData( elem )的事件过滤掉...
好像没有的。直到发现了这样一段代码。
<button class="btn1">Button</button>
var btn1 = document.querySelector('.btn1');
btn1.addEventListener('click', function () {...
