在网页交互开发中，我们通常习惯等待用户去点击、去输入来触发事件。但有的时候，我们需要用代码来模拟用户的操作，让程序自己去触发某个元素的特定行为。jQuery 的 trigger() 方法就是干这个的，它能触发匹配元素上绑定的指定事件处理器，甚至可以触发某些元素的默认行为，比如表单提交。
方法核心构成
trigger() 方法的常用语法很直观：
$(selector).trigger(event, param1, param2, ...)
这个方法只有一个必填参数，其余都是可选的。必填参数 event 用来指定你要触发的事件类型，可以是像 click、select、submit 这样的标准事件，也可以是你自己定义的 custom 自定义事件。后面跟着的 param1、param2 这些可选参数，会在触发事件时作为额外数据传递给事件处理函数，它们主要用在自定义事件里传递业务数据，相当好用。
基础实例：用代码触发 select 事件
下面这个例子展示了最基本的 trigger() 用法。页面中有一个文本输入框和一段提示文字。我们给段落元素绑定了 click 事件，当用户点击这个段落时，程序会使用 trigger("select") 去触发输入框的 select 事件。而输入框的 select 事件处理器被定义为改变自身的背景色、字号，同时修改整个页面的样式背景。
<!DOCTYPE html>
<html>
<head>
<title> jQuery trigger() 基础触发示例 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("p").click(function(){
$("#tf").trigger("select");
});
$("#tf").select(function(){
$("#tf").css({"backgroundColor": "yellow", "fontSize": "25px"});
$("body").css({"backgroundColor": "lightgreen", "fontSize": "25px"});
});
});
</script>
</head>
<body>
<h4> 使用 jQuery trigger() 方法模拟 select 事件 </h4>
<input id = "tf" type = "text" value = "代码号学习编程">
<br>
<p id = "p1"> 点击下方文字查看效果 </p>
<p id = "p2"> 点我触发 </p>
</body>
</html>
这个例子很好地说明了 trigger() 的作用：我们根本没有去实际选中输入框里的文字，但通过调用 trigger("select")，输入框的 select 事件处理器同样被执行了，就好像用户真的去框里拖选了一段文本一样。这种能力在做自动化测试或者复杂组件间通信时经常用到。
我个人在早期编写联动交互逻辑时，曾犯过一个错误，就是在一个功能模块里又复制粘贴了一遍相同的处理代码。后来发现，可以给目标元素绑定好事件，然后在需要的地方直接 trigger 这个事件，这样代码逻辑只维护一份，清晰且不容易出错。
进阶应用：传递参数的自定义事件
trigger() 方法真正的威力在于配合自定义事件和额外参数。通过自定义事件，你可以在页面的不同模块之间建立起松耦合的消息传递机制。下面这个示例中，点击段落元素后，先用 bind 绑定了一个叫 custom 的自定义事件，这个事件处理函数接收三个参数：员工编号、姓名和薪资。紧接着就通过 trigger 触发这个刚绑定的自定义事件，并把参数数组传递过去，最终弹出一个包含完整信息的数据展示窗口。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("#p2").click(function () {
$("#p2").bind("custom", function(event, id, name, salary){
alert("员工编号 = " + id + "\n姓名 = " + name + "\n薪资 = " + salary);
});
$("#p2").trigger("custom", ["代码号E01", "代码号John", "代码号30,000"]);
});
});
</script>
</head>
<body>
<h4> trigger() 方法配合自定义事件传参 </h4>
<p id = "p1"> 点击下方文字触发自定义事件 </p>
<p id = "p2"> 点我传参 </p>
</body>
</html>
本节课程知识要点
在日常开发中，如果发现自己在多个地方编写了重复的交互逻辑，不妨停下来想想是否可以用 trigger() 来简化。把核心逻辑绑定在目标元素上，然后在任何需要触发的地方去调用它，这样代码的结构会更清晰，后期维护也省心省力。对于自定义事件的使用，我的个人建议是：善用命名空间来区分事件，比如 custom.employee，这样在后续需要移除或管理事件时，能够精确定位，避免影响到其他同类型的绑定。
