当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .trigger()用法及代码示例


用法 
.trigger( eventType [, extraParameters ] ) => jQuery

说明：执行所有附加到给定事件类型的匹配元素的处理程序和行为。

  • 添加的版本：1.0.trigger( eventType [, extraParameters ] )

    • eventType
      类型：String
      包含 JavaScript 事件类型的字符串，例如 click 或 submit 。
    • extraParameters
      类型：Array 或 PlainObject
      要传递给事件处理程序的附加参数。

  • 添加的版本：1.3.trigger( event [, extraParameters ] )

当相应的事件发生时，将触发任何带有.on() 或其快捷方法之一的事件处理程序。但是，可以使用.trigger() 方法手动触发它们。对.trigger() 的调用以与用户自然触发事件相同的顺序执行处理程序：

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

从 jQuery 1.3 开始，.trigger() ed 事件在 DOM 树中冒泡；事件处理程序可以通过从处理程序返回 false 或在传递给事件的事件对象上调用 .stopPropagation() 方法来停止冒泡。尽管.trigger() 模拟事件激活，并带有合成的事件对象，但它并不能完美地复制naturally-occurring 事件。

要触发通过 jQuery 绑定的处理程序而不触发本机事件，请改用 .triggerHandler() 。

当我们使用.on() 方法定义自定义事件类型时，.trigger() 的第二个参数会变得有用。例如，假设我们已将 custom 事件的处理程序绑定到我们的元素，而不是像我们上面所做的那样内置 click 事件：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

事件对象总是作为第一个参数传递给事件处理程序。参数数组也可以传递给 .trigger() 调用，这些参数也将在事件对象之后传递给处理程序。从 jQuery 1.6.2 开始，可以传递单个字符串或数字参数而不用包装在数组中。

请注意此处传递的额外参数与 .on() 方法的 eventData 参数之间的区别。两者都是将信息传递给事件处理程序的机制，但.trigger() 的extraParameters 参数允许在触发事件时确定信息，而.on() 的eventData 参数要求信息已经在绑定处理程序时计算。

.trigger() 方法可用于包装普通 JavaScript 对象的 jQuery 集合，类似于发布/订阅机制；触发事件时将调用绑定到对象的任何事件处理程序。

注意：对于普通对象和 DOM 对象，除了window，如果触发的事件名称与对象上的属性名称匹配，则如果没有事件处理程序调用，jQuery 将尝试将该属性作为方法调用event.preventDefault().如果不需要此行为，请使用.triggerHandler()反而。
注意：与.triggerHandler(), 调用时.trigger()事件名称与对象上的属性名称匹配，前缀为on(例如触发click在window有一个非空onclick方法)，jQuery 将尝试将该属性作为方法调用。
注意：当使用不是 array-like 但仍包含length属性，您应该在数组中传递对象(例如[ { length: 1 } ])。

例子：

点击按钮 #2 也会触发点击按钮 #1。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <style>
  button {
    margin: 10px;
  }
  div {
    color: blue;
    font-weight: bold;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
 
<script>
$( "button" ).first().click(function() {
  update( $( "span" ).first() );
});
 
$( "button" ).last().click(function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
});
 
function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}
</script>
 
</body>
</html>

演示：

要在不使用 submit() 函数的情况下提交第一个表单，请尝试：

$( "form" ).first().trigger( "submit" );

要在不使用 submit() 函数的情况下提交第一个表单，请尝试：

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

将任意数据传递给事件：

$( "p" )
  .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  })
  .trigger( "click", [ "foo", "bar" ] );

通过事件对象传递任意数据：

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

通过事件对象传递数据的另一种方法：

$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .trigger()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。