Question

我使用jQuery设置了一个事件监听器：

$(document).on('my-custom-event', function(e, custom_id) {
  console.log('the ID is: ' + custom_id);
});

使用jQuery.trigger很容易触发它，如下所示：

$(document).trigger('my-custom-event', '12345');

但我想弄清楚如何使用vanilla javascript触发它，并确保custom_id正确传递。

例如，这不起作用。它触发事件，但不传递custom_id参数：

var e = new CustomEvent('my-custom-event', 'asdf')
document.dispatchEvent(e)

如何使用普通的javascript来触发事件并传递custom_id参数？

Answer 1

根据MDN，detail可用于在初始化事件时传递数据。

以下是一个例子：

// add listener
// let's be cool and add it to the document for this example
document.addEventListener('EVENT-NAME', function (e) {
    // do something
    // use e.detail for the data
});

// create event
var event = new CustomEvent('EVENT-NAME', {
        detail: 'legit data'
});

// dispatch event
document.dispatchEvent(event);

我还创建了一个演示：http://jsfiddle.net/dirtyd77/02p2o7ut/1/

希望这有帮助，如果您有任何其他问题，请告诉我们！

编辑：

不幸的是，没有办法（我知道）做你要求的事情，但是，有一个解决方法。

jQuery事件有一个名为originalEvent的属性。您可以检查custom_id没有的事件中是否存在该值。以下是您可以这样做的方法：

DEMO：http://jsfiddle.net/dirtyd77/02p2o7ut/2/

$(document).on('my-custom-event', function (e, custom_id) {
    // if custom_id not defined, will check e.originalEvent.detail
    custom_id = custom_id || e.originalEvent.detail;

    console.log('the ID is: ' + custom_id);
});

// trigger jQuery event
$(document).trigger('my-custom-event', '12345');


$('#customEvent').click(function () {
    // create event
    var event = new CustomEvent('my-custom-event', { detail: '12345' });

    // dispatch event
    document.dispatchEvent(event);
});

如何使用普通的javascript将带有参数的事件调度到jQuery.on（）？

1 个答案:

编辑：