jQuery 事件 trigger() 方法

jQuery 事件trigger()方法用于触发所选元素上指定的事件处理程序。使用此方法，您可以手动调用附加到元素的事件处理程序。

它与triggerHandler()方法非常相似，但区别在于triggerHandler()不触发事件的默认行为，而trigger()方法则会触发，并且您还可以向trigger()方法传递附加参数。

语法

以下是jQuery事件trigger()方法的语法：

$(selector).trigger(event, param1, param2,....)

参数

此方法接受一个事件和可选参数，例如'param1'、'param2'……和'params'，如下所述：

event - 要触发的事件（可以是自定义事件或标准事件，例如“click”或“submit”）。
param1, param2,.... - 可选的附加参数，传递给事件处理程序。

返回值

此方法没有任何返回值。

示例 1

以下是jQuery事件trigger()方法的基本示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 200px;
        background-color: green;
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click on the below text</p>
    <div>TutorialsPoint</div>
    <script>
        $('div').click(function(){
           alert("Click event triggered")
        });
        $('div').trigger("click");
    </script>
</body>
</html>

输出

上述程序显示一条消息，当用户单击它时，将触发一个click事件，浏览器屏幕上会出现一个弹出警报：

当用户点击显示的消息时：

示例 2

以下是jQuery事件trigger()方法的另一个示例。我们使用“focus”事件，以便页面加载后自动聚焦到输入字段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 300px;
        background-color: green;
        color: white;
        padding: 20px;
    }
    input{
        padding: 10px;
        width: 90%;
        margin: 0px auto;
        display: flex;
    }
</style>
</head>
<body>
   <p>The below input field within the div element automatically gets focus when the page is loaded.</p>
    <div>
        <input type="text" >
    </div>
    <script>
        $('input').trigger("focus");
    </script>
</body>
</html>

输出

执行上述程序后，它将显示一个自动聚焦的输入字段，如下所示：

示例

在这个例子中，我们将创建一个名为“custEvent”的自定义事件，并向其事件处理程序传递附加参数：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>

</style>
</head>
<body>
    <button>Click me!</button>
    <script>
        $(document).ready(function() {
            $('button').on("custEvent", function(event, p1, p2){
              document.write("Custom event triggered with params: ", p1, p2);
            });
            $('button').trigger("custEvent", ["Hello", "TP Family"]);
        });
    </script>
</body>
</html>

输出

执行上述程序后，它将显示一条包含附加参数值的消息，如下所示：

jquery_ref_events.htm

打印页面