jQuery | triggerHandler() 方法

triggerHandler() 方法是 jQuery 中的一个事件触发器，可以在指定元素上触发一个或多个事件，并可以选择是否阻止事件冒泡。

语法

$(selector).triggerHandler(event[, extraParameters])

• selector：必需，用于指定要触发事件的元素，可以是一个或多个元素的 jQuery 选择器。
• event：必需，用于指定要触发的事件，可以是一个或多个事件类型的字符串，多个事件类型用空格隔开。
• extraParameters：可选，传递给事件处理函数的额外参数。

返回值

triggerHandler() 方法返回指定元素上第一个触发的事件处理函数的返回值，如果没有绑定任何事件处理函数，将返回 undefined。

与 trigger() 方法的区别

与 trigger() 方法不同的是，triggerHandler() 方法只会触发指定元素上的事件，而不会触发任何后代元素的事件。也就是说，通过 triggerHandler() 方法触发的事件不会冒泡到父元素和祖先元素。

使用示例

下面的示例展示了如何在 button 元素上触发 click 事件和 custom 事件，并传递额外参数。

// 触发 click 事件
$('#myButton').triggerHandler('click');

// 触发 custom 事件，并传递额外参数
$('#myButton').triggerHandler('custom', [1, 2, 3]);

阻止事件冒泡

triggerHandler() 方法还可以选择是否阻止事件冒泡。可以将设置参数 { "bubbles": false } 传递给方法，或者在事件处理函数中调用 event.stopPropagation() 方法来阻止事件冒泡。

// 在 click 事件处理函数中阻止事件冒泡
$('#myButton').on('click', function(event) {
  event.stopPropagation();
});

// 触发 click 事件，但不会冒泡到父元素
$('#myButton').triggerHandler('click', { "bubbles": false });

总结

triggerHandler() 方法是一个强大的 jQuery 事件触发器，可以方便地在指定元素上触发一个或多个事件，并可以选择是否阻止事件冒泡。它与 trigger() 方法的区别在于，triggerHandler() 方法不会触发后代元素的事件，因此更加精确和可控。