jQuery中 .trigger() 和 .click() 方法的优势/区别

Question

jQuery中 .trigger() 和 .click() 方法的优势/区别

79

就性能而言，以下几种情况有哪些提升（或仅仅是区别）:

$('.myEl').click();

并且

$('.myEl').trigger('click');

有吗？

- benhowdle89

4个回答

5

我认为

$('.myEl').trigger('click');

之所以更好，是因为它节省了函数调用。只需调用 $('.myEl').click(); 即可调用该函数。查看 jQuery 源代码

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }

        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
                    //here they call trigger('click'); if you provide no arguments
            this.trigger( name );
    };

    if ( jQuery.attrFn ) {
        jQuery.attrFn[ name ] = true;
    }

    if ( rkeyEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
    }

    if ( rmouseEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
    }
});

- Nicola Peluchetti

3

针对性能优化，可以在这里查看：http://jsperf.com/trigger-vs-not-trigger。两者几乎相同...click()是trigger('click')的简写。

- sandeep

这实际上并不准确。说它是一种速记方式会暗示 click() 被写成了 jquery.fn.click = function() { return trigger("click") }，但事实并非如此(请参见@andlrc的答案)。在 click() 可能调用 trigger("click") 前有一些代码运行，这段时间足够长，显然可以让 FireFox 确定点击事件是以编程方式应用的，并且不会予以执行。 trigger("click") 更快地完成。我碰巧遇到了 @Graeck 在评论中提到的同样问题，使用 trigger("click") 可以解决，而 click() 则不能。 - Sean Kendle

2

查看http://api.jquery.com/click/：

在第三种变体中，当没有参数调用 .click() 时，它是 .trigger("click") 的快捷方式。

它们看起来是相同的。

- Pawel Zubrycki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas Louv · Accepted Answer

这是click方法的代码：

jQuery.fn.click = function (data, fn) {
    if (fn == null) {
        fn = data;
        data = null;
    }

    return arguments.length > 0 ? this.on("click", null, data, fn) : this.trigger("click");
}

如果函数没有参数被传递，使用.trigger("click")将会触发点击事件。

使用.trigger("click")将少调用一个函数。

正如@Sandeep在他的答案中指出的那样，.trigger("click")更快：

自1.9.0版本以来，对于data和fn的检查已经移动到.on函数中。

$.fn.click = function (data, fn) {
    return arguments.length > 0 ? this.on("click", null, data, fn) : this.trigger("click");
}