jQuery 模擬操作

1.常用模擬

有時，需要通過模擬使用者操作，來達到單擊的效果。例如在使用者進入頁面後，就觸發 click 事件，而不需要使用者去主動單擊。在 jquery 中，可以使用 trigger() 方法完成模擬操作。例如可以使用下面的**來觸發 id 為 btn 的按鈕的 click 事件。

點選我

這樣，當頁面裝載完畢後，就會立刻輸出想要的效果，如上圖所示。也可以直接用簡化寫法 click()，來達到同樣的效果：

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

2.觸發自定義事件

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

例如為元素繫結乙個 "myclick" 的事件， jquery **如下：

點選我

想要觸發這個事件，可以使用以下**來實現：

$('#btn').trigger("myclick");

實現效果如下圖所示。

3.傳遞資料

trigger(type, [data]) 方法有兩個引數，第1個引數是要觸發的事件型別，第2個引數是要傳遞給事件處理函式的附加資料，以陣列形式傳遞。通常可以通過傳遞乙個引數給**函式來區別這次事件是**觸發的還是使用者觸發的。

下面是乙個傳遞資料的例子。

點選我

4.執行預設操作

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

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

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

如果只想觸發繫結的 focus 事件，而不想執行瀏覽器預設操作，可以使用 jquery 中另乙個類似的方法—— triggerhandler() 方法。

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

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

其他用法

前面已經對 bind() 方法進行了介紹， bind() 方法不僅能為元素繫結瀏覽器支援的具有相同名稱的事件，也可以繫結自定義事件。不僅如此， bind() 方法還能做很多的事情。

1 . 繫結多個事件型別

例如可以為元素一次性繫結多個事件型別。 jquery **如下：

滑入.

當游標滑入元素時，該元素的 class 切換為「 over 」；當游標滑出元素時，class 切換為先前的值。這段**等同於下面的**：

很顯然，第1種方式能減少**量，這就是 jquery 提倡的「write less，do more」（寫得更少，做得更多）理念。

2.新增事件命名空間，便於管理

例如可以把為元素繫結的多個事件型別用命名空間規範起來， jquery **如下：

test.

根據命名空間，刪除事件

在所繫結的事件型別後面新增命名空間，這樣在刪除事件時只需要指定命名空間即可。單擊〈button〉元素後，「 plugin」的命名空間被刪除，而不在「plugin」的命名空間的「dbldick」事件依然存在。

刪除多個事件**也可以寫為以下鏈式**，但顯然上面的方式寫得更少。

$("button").click(function
() )

3.相同事件名稱，不同命名空間執行方法

例如可以為元素繫結相同的事件型別，然後以命名空間的不同按需呼叫， jquery **如下：

test.

根據命名空間，觸發事件

當單擊元素後，會同時觸發 click 事件和 click.plugin 事件。如果只是單擊元素，則只觸發 click 事件，而不觸發 click.plugin 事件。注意， trigger("click!") 後面的感嘆號的作用是匹配所有不包含在命名空間中的 click 方法。

如果需要兩者都被觸發，改為如下**即可：

$("div").trigger("click");   //
去掉click後面的感嘆號