为什么触发（'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);