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);

为什么触发器（＆＃39;点击＆＃39;）与$（＆＃39; #test＆＃39;）相同。触发器（{type：＆＃39;点击＆＃39;}）;?

2 个答案: