jQuery trigger()和triggerHandler()模拟用户触发事件（附带实例）

在 jQuery 中，一般常用 triggerHandler() 方法和 trigger() 方法来模拟用户的操作触发事件。

例如，可以使用下面的代码来触发 id 属性值为 button 的按钮的 click 事件：

$("#button").trigger("click");

triggerHandler() 方法的语法格式与 trigger() 方法的语法格式完全相同。不同的是，triggerHandler() 方法不会导致与浏览器同名的默认行为被执行，而 trigger() 方法会导致与浏览器同名的默认行为被执行。

例如，使用 trigger() 触发一个名为 submit 的事件，同样会导致浏览器执行提交表单的行为。要阻止浏览器的默认行为被执行，只需要返回 false。此外，使用 trigger() 方法和 triggerHandler() 方法还可以触发 on() 绑定的自定义事件，并且可以为事件传递参数。

【实例】在页面加载完毕时执行按钮的 click 事件，但是并不需要用户自己操作。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 id 属性值为 button 的按钮。具体代码如下：

<input type="button" name="button" id="button" value="普通按钮"/>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，为按钮绑定 click 事件，弹出参数 msg1 和 msg2 连接在一起的字符串，再使用 trigger() 方法模拟 click 事件。具体代码如下：

<script type="text/javascript">
$(document).ready(function () {
    $("input:button").on("click", function (event, msg1, msg2) {
        alert(msg1 + msg2);                 // 弹出提示对话框
    }).trigger("click", ["欢迎访问", "C语言中文网"]); // 页面加载触发 click 事件
});
</script>

运行本实例，效果如下图所示：

图 1 触发click事件

注意，trigger() 方法触发事件的时候会触发浏览器的默认行为，但是 triggerHandler() 方法触发事件的时候不会触发浏览器的默认行为。

jQuery trigger()和triggerHandler()模拟用户触发事件（附带实例）

相关文章