javascript - jQuery - 使用自定义事件的方法

Question

我有一个像这样的自定义 jQuery 事件

jQuery(this).trigger({
    type: 'my_own_event',
    data1: 'foo',
    data2: 'bar'
});

要附加事件处理程序，我必须使用 .on()像这样的功能。

jQuery(element).on( 'my_own_event', function(e) {
    //Do something
});

如何像使用任何其他内置事件一样使用它，例如 .click()、.keyup()。像这样

jQuery(element).my_own_event(function(e){
    //Do Something
});

我尝试使用 jQuery.fn 按如下方式执行此操作

jQuery.fn.my_own_event = function(callback) {
    jQuery(this).on('my_own_event',callback);
}

它确实适用于 Firefox 27。

这样做正确吗？

在事件名称中可以使用下划线吗？

Answer 1

没关系。命名没问题，只是约定俗成。

不过，您应该调整快捷方式功能。 jQuery() 不是必需的，因为 this 已经是一个 jQuery 对象。您还应该返回原始对象以用于链接目的。

您可能还想像内置事件快捷方式一样处理调用的空参数版本，以触发事件。

下面是 jQuery 源代码本身是如何做到的:

jQuery.fn[ name ] = function( data, fn ) {
    return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
};

其中 name 是事件，例如 click 或 keyup。这也处理可选的 data 参数，它将在回调函数中设置 event.data。

那么你就完全符合现有的 jQuery 事件快捷函数约定了。

因此您的示例可以更改为:

jQuery.fn.my_own_event = function(data, callback) {
    return arguments.length > 0 ?
        this.on('my_own_event', null, data, callback) :
        this.trigger('my_own_event');
};