trigger 和 triggerHandler()，自定义事件
Posted knowledge-is-infinite
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了trigger 和 triggerHandler()，自定义事件相关的知识，希望对你有一定的参考价值。
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>
以上是关于trigger 和 triggerHandler()，自定义事件的主要内容，如果未能解决你的问题，请参考以下文章
自定义事件.trigger()和.triggerHandler()
trigger 和 triggerHandler()，自定义事件
关于jQuery中的trigger和triggerHandler方法的使用
219 jQuery事件处理： off() 解绑事件，trigger() triggerHandler() 自动触发事件