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.com/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.com/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.com/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

列印頁面