正文
trigger 和 triggerHandler()，自定义事件
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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()，自定义事件语法：$(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>
