技術標籤：jQueryjquery前端

目錄

• • 1. 標準事件的觸發
  • 2. 自定義事件的觸發

1. 標準事件的觸發

jQuery 物件的 trigger() 方法觸發被選元素的指定事件型別。

<style>
    .blue {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div class="blue"></div>
<button onclick="
 
fn()">click me</button>

<script>
    $(".blue").on("click", function () {
        console.log("div 被點選了...");
    });
    function fn() {
        $(".blue").trigger("click");
    }
</script>

點選按鈕時，將觸發 div 元素的點選事件：

2. 自定義事件的觸發

trigger() 方法還可以觸發自定義的事件型別。

trigger() 方法的第二個引數為一個數組，可以為觸發事件的回撥函式傳遞引數。

值得注意的是，事件處理函式第一個形參固定接受事件物件，因此從第二個形參開始，依次接受傳入陣列中的每一項。

<style>
    .blue {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div class="blue"></div>
<button
 
 onclick="fn()">click me</button>

<script>
    $(".blue").on("Jethro", function (a, b, c, d) {
        console.log("div 被點選了...");
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
    });
    function fn() {
        $(".blue").trigger("Jethro", ["string", 123, true]);
    }
</script>

點選按鈕後，結果如下：