爲什麼觸發（'click'）與$（'＃test'）相同。trigger（{type：'click'}）;？

Question

我是JS新手，基本上我試圖深入研究JS事件並更好地理解事件和對象。我遇到了一個小問題，我想問你好心人。

我想知道天氣trigger('click')相同trigger({type : 'click'})

現在，我寫了下面的功能理解上的差異，並確認他們是否都是一樣的：

<script> 
    $(document).ready(function(){ 

     var call_it = function() {   
      setTimeout(function() { 
       $('#test').trigger({ 
        type : 'click' 
       }); 
      } , 1500); 
     } 

     call_it(); 

     $('#test').on('click' , function(){ 
       console.log('button clicked'); 
     }); 
    }); 
</script> 

小提琴HERE

現在您替換時：

$('#test').trigger({ 
     type : 'click' 
    }); 

有：

$('#test').trigger('click'); 

點擊仍然觸發，但我仍然困惑，如何和爲什麼是他們相同的？ 如何它們在內部是一樣的嗎？

我知道它的一個技巧問題，但我希望有人能回答它。

謝謝。

亞歷-Z。

Answer 1

他們是幾乎相同的，是的。

當提供了一種eventType，如"click"，.trigger()從它創建一個jQuery.Event() instance：

console.log(jQuery.Event('click')); 
// { type: 'click', timestamp: 14..., ... } 

From the source（V2.1。4）：

trigger: function(event, data, elem, onlyHandlers) { 
     // ... 

     // Caller can pass in a jQuery.Event object, Object, or just an event type string 
     event = event[ jQuery.expando ] ? 
      event : 
      new jQuery.Event(type, typeof event === "object" && event); 

     // .. 
} 

.trigger()也直接接受這樣event對象：

$().trigger(jQuery.Event('click')) 

而且，jQuery.Event('click')和{ type: 'click' }之間的差異僅僅是附加的屬性，如timestamp，其aren't required by .trigger()。

var i, // ... 
    // ... 
    type = hasOwn.call(event, "type") ? event.type : event, 
    // ... 

Answer 2

它們都是相同的。

$('#test').trigger({ 
    type : 'click' 
}); 

這是通過事件對象來傳遞數據的替代方式。您可以通過此方法將任意數據傳遞給事件。

$('#test').trigger({ 
    type : 'click', 
    param1 : "foo", 
    param2 : "bar" 
}); 

Reference

---

Demo

$("#test").click(function (event) { 
    console.log(event.a) 
    console.log(event.b) 
    console.log(event.type) 
}); 
setTimeout(function() { 
    $("#test").trigger({ 
     type: "click", 
     a: "foo", 
     b: "bar" 
    }); 
}, 1500);