1 trigger 和 triggerHandler()，自定义事件
2 语法：
3 $(selector).trigger(event,[param1,param2,...])
4 1，event 必需。规定指定元素要触发的事件。
5 2，[param1,param2,...] 可选。传递到事件处理程序的额外参数。
6
7 额外的参数对自定义事件特别有用。
8 可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
9 ========================
10 triggerHandler() 方法触发被选元素上指定的事件。
11
12 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
13
14 该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。
15
16 triggerHandler() 与 trigger() 方法相比的不同之处:
17 1，它不会引起事件（比如表单提交）的默认行为,
18 2，.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
19 3，由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
20 ========================
21 <html>
22 <head>
23 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
24 <script type="text/javascript" src="js/jquery.js"></script>
25 <script type="text/javascript">
26 $(document).ready(function(){
27 $("input").select(function(){
28 $("input").after("文本被选中！");
29 });
30 $("button").click(function(){
31 $("input").trigger("select");
32 });
33 });
34 </script>
35 </head>
36 <body>
37 <input type="text" name="FirstName" value="Hello World" />
38 <br />
39 <button>激活 input 域的 select 事件</button>
40 </body>
41 </html>
42 =================
43 <html>
44 <head>
45 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
46 <script type="text/javascript" src="/jquery/jquery.js"></script>
47 <script type="text/javascript">
48 $(document).ready(function(){
49 $("input").select(function(){
50 $("input").after("文本被选中！");
51 });
52 var e = jQuery.Event("select");
53 $("button").click(function(){
54 $("input").trigger(e);
55 });
56 });
57 </script>
58 </head>
59 <body>
60 <input type="text" name="FirstName" value="Hello World" />
61 <br />
62 <button>激活 input 域的 select 事件</button>
63 </body>
64 </html>
65 ==================
66 <!DOCTYPE html>
67 <html lang="en">
68 <head>
69 <meta charset="UTF-8">
70 <title>Document</title>
71 </head>
72 <body>
73 <h2>自定义事件trigger</h2>
74 <div class="left">
75 <div><span></span><span>0</span>点击次数</div>
76 <button>直接点击</button>
77 <button>通过自定义点击</button>
78 </div>
79 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
80 <script src="js/jquery.js"></script>
81 <script type="text/javascript">
82
83 //点击更新次数
84 $("button:first").click(function(event,bottonName) {
85 bottonName = bottonName || ‘first‘;
86 update($("span:first"),$("span:last"),bottonName);
87 });
88
89 //通过自定义事件调用，更新次数
90 $("button:last").click(function() {
91 $("button:first").trigger(‘click‘,‘last‘);
92 });
93
94 function update(first,last,bottonName) {
95 first.text(bottonName);
96 var n = parseInt(last.text(), 10);
97 last.text(n + 1);
98 }
99 </script>
100 </body>
101 </html>
102 ================
103 <!DOCTYPE html>
104 <html lang="en">
105 <head>
106 <meta charset="UTF-8">
107 <title>Document</title>
108 </head>
109 <body>
110 <h2>自定义事件triggerHandler</h2>
111 <div class="left">
112 <div id="accident">
113 <a>triggerHandler事件</a>
114 <input type="text">
115 </div>
116 <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
117 <button>不会冒泡，不触发浏览器默认聚焦行为</button>
118 </div>
119 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
120 <script src="js/jquery.js"></script>
121 <script type="text/javascript">
122
123 //给input绑定一个聚焦事件
124 $("input").on("focus",function(event,title) {
125 $(this).val(title)
126 });
127
128 $("#accident").on("click",function() {
129 alert("trigger触发的事件会在 DOM 树中向上冒泡");
130 });
131 //trigger触发focus
132 $("button:first").click(function() {
133 $("a").trigger("click");
134 $("input").trigger("focus");
135 });
136
137 //triggerHandler触发focus
138 $("button:last").click(function() {
139 $("a").triggerHandler("click");
140 $("input").triggerHandler("focus","没有触发默认聚焦事件");
141 });
142 </script>
143 </body>
144 </html>
145 ==========以下是triggerHandler()方法============
146 <!DOCTYPE html>
147 <html>
148 <head>
149 <meta charset="utf-8">
150 <title>菜鸟教程(runoob.com)</title>
151 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
152 <script src="js/jquery.js"></script>
153 <script>
154 $(document).ready(function(){
155 $("input").select(function(){
156 $("input").after("select 事件触发！");
157 });
158 $("button").click(function(){
159 $("input").triggerHandler("select");
160 });
161 });
162 </script>
163 </head>
164 <body>
165
166 <input type="text" value="Hello World">
167 <br><br>
168 <button>触发输入框的 select 事件</button>
169 <p>该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。</p>
170
171 </body>
172 </html>
trigger 和 triggerHandler()，自定义事件语法：$(selector).trigger(event,[param1,param2,...]) 1，event 必需。规定指定元素要触发的事件。 2，[param1,param2,...] 可选。传递到事件处理程序的额外参数。
额外的参数对自定义事件特别有用。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。========================triggerHandler() 方法触发被选元素上指定的事件。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。
triggerHandler() 与 trigger() 方法相比的不同之处: 1，它不会引起事件（比如表单提交）的默认行为, 2，.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。 3，由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。========================<html><head> <!-- 这里必须引入jQuery.js否则无法正常运行 --><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("input").select(function(){ $("input").after("文本被选中！"); }); $("button").click(function(){ $("input").trigger("select"); }); });</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>=================<html><head> <!-- 这里必须引入jQuery.js否则无法正常运行 --><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("input").select(function(){ $("input").after("文本被选中！"); }); var e = jQuery.Event("select"); $("button").click(function(){ $("input").trigger(e); });});</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>==================<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h2>自定义事件trigger</h2> <div class="left"> <div><span></span><span>0</span>点击次数</div> <button>直接点击</button> <button>通过自定义点击</button> </div> <!-- 这里必须引入jQuery.js否则无法正常运行 --> <script src="js/jquery.js"></script> <script type="text/javascript">
//点击更新次数 $("button:first").click(function(event,bottonName) { bottonName = bottonName || ‘first‘; update($("span:first"),$("span:last"),bottonName); });
//通过自定义事件调用，更新次数 $("button:last").click(function() { $("button:first").trigger(‘click‘,‘last‘); });
function update(first,last,bottonName) { first.text(bottonName); var n = parseInt(last.text(), 10); last.text(n + 1); } </script></body></html>================<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h2>自定义事件triggerHandler</h2> <div class="left"> <div id="accident"> <a>triggerHandler事件</a> <input type="text"> </div> <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br> <button>不会冒泡，不触发浏览器默认聚焦行为</button> </div> <!-- 这里必须引入jQuery.js否则无法正常运行 --> <script src="js/jquery.js"></script> <script type="text/javascript">
//给input绑定一个聚焦事件 $("input").on("focus",function(event,title) { $(this).val(title) });
$("#accident").on("click",function() { alert("trigger触发的事件会在 DOM 树中向上冒泡"); }); //trigger触发focus $("button:first").click(function() { $("a").trigger("click"); $("input").trigger("focus"); });
//triggerHandler触发focus $("button:last").click(function() { $("a").triggerHandler("click"); $("input").triggerHandler("focus","没有触发默认聚焦事件"); }); </script></body></html>==========以下是triggerHandler()方法============<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <!-- 这里必须引入jQuery.js否则无法正常运行 --><script src="js/jquery.js"></script><script>$(document).ready(function(){ $("input").select(function(){ $("input").after("select 事件触发！"); }); $("button").click(function(){ $("input").triggerHandler("select"); });});</script></head><body>
<input type="text" value="Hello World"><br><br><button>触发输入框的 select 事件</button><p>该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。</p>
</body></html>
原文地址：https://www.cnblogs.com/Knowledge-is-infinite/p/11333961.html