JQuery 自定義事件

jQuery的事件自定義事件還是通過on繫結的，然後再通過trigger來觸發這個事件

1. 繫結事件

//給element繫結hello事件
element.bind("hello",function(){
    alert("hello world!");
});

2. 執行事件

//觸發hello事件
element.trigger("hello");

trigger的幾種常見用法

1.常用模擬

在jQuery中，可以使用trigger()方法完成模擬操作。例如可以使用下面的程式碼來觸發id為btn按鈕的click事件。

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

也可以直接用簡化寫法click()，來達到同樣的效果（對已存在的系統事件呼叫）：

$("#btn").click();

2.觸發自定義事件

trigger()方法不僅能觸發瀏覽器支援的具有相同名稱的事件，也可以觸發自定義名稱的事件。

例如為元素繫結一個“myClick”的事件，jQuery程式碼如下：

$("#btn").bind("myClick", function () {
    $("#test").append("<p>我的自定義事件。</p>")；
})；

想要觸發這個事件，可以使用下面的程式碼來實現：

3.傳遞資料

trigger(tpye[,datea])方法有兩個引數，第一個引數是要觸發的事件型別，第二個單數是要傳遞給事件處理函式的附加資料，以陣列形式傳遞。通常可以通過傳遞一個引數給回撥函式來區別這次事件是程式碼觸發的還是使用者觸發的。

下面的是一個傳遞資料的例子:

$("#btn").bind("myClick", function (event, message1, message2) { //獲取資料
    $("#test").append("p" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick",["我的自定義","事件"]); //傳遞兩個資料
$(“#btn”).trigger(“myClick”,["我的自定義","事件"]); //傳遞兩個資料

4.執行預設操作

triger()方法觸發事件後，會執行瀏覽器預設操作。例如：

$("input").trigger("focus");

以上程式碼不僅會觸發為input元素繫結的focus事件，也會使input元素本身得到焦點（瀏覽器預設操作）。

如果只想觸發繫結的focus事件，而不想執行瀏覽器預設操作，可以使用jQuery中另一個類似的方法-triggerHandler()方法。（沒有試驗過，知道有這麼一回事）

$("input").triggerHandler("focus");

該方法會觸發input元素上繫結的特定事件，同時取消瀏覽器對此事件的預設操作，即文字框指觸發繫結的focus事件，不會得到焦點。

 

• 學院Go語言視訊主頁
  https://edu.csdn.net/lecturer/1928

• 清華團隊帶你實戰區塊鏈開發

• 掃碼獲取海量視訊及原始碼   QQ群：721929980