js trigger()方法的用法：

最新推荐文章于 2024-05-10 22:25:09 发布

vivian_hnd

最新推荐文章于 2024-05-10 22:25:09 发布

阅读量3.5w

点赞数 2

分类专栏：学习笔记

本文链接：https://blog.csdn.net/vivian_wang07/article/details/78737437

版权

学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单的提交）。
该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。
与 triggerHandler() 方法相比的不同之处:

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

下边是测试用例：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>triggerHandler demo</title>
  <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>

<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅
    执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。</p>
<input type="text" value="将获取焦点"><br>
    <input type="text" value="将获取焦点"><br>
    <input type="text" value="将获取焦点"><br>

<script>
$( "#old" ).click(function() {
  $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
  $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
  //$( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
    $(this).css('border-color','red')
});
</script>

</body>
</html>

vivian_hnd

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js trigger()方法的用法：

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单的提交）。该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。与 triggerHandler() 方法相比的不同之处:它不会引起事件（比如表单提交）的默认行为.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerH
复制链接

扫一扫