javascript - 为什么触发器 ('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>

fiddle HERE

现在当你替换:

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

与:

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

点击仍然被触发，但我仍然很困惑，如何和为什么它们是一样的？？ 如何它们在内部是一样的？

我知道这是一个棘手的问题。

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,
    // ...