javascript - 推特 Bootstrap 。为什么模态事件在 JQuery 中有效，但在纯 JS 中无效？

Question

Twitter Bootstrap 模式对话框有一组可与回调一起使用的事件。

这是一个 jQuery 示例:

    $(modalID).on('hidden.bs.modal', function (e) {

        console.log("hidden.bs.modal");
    });

但是，当我将此方法转录为 JS 时，事件 'hidden.bs.modal' 不起作用。使用'click'确实有效:

    document.querySelector(modalID).addEventListener('hidden.bs.modal', function(e) {

        console.log("hidden.bs.modal");
    }, false);

这些 Bootstrap 事件只能与 jQuery 一起使用吗？为什么？

谢谢，
道格

Answer 1

其背后的原因是 Twitter Bootstrap 使用 that.$element.trigger('hidden.bs.modal')( line 997 ) 来触发其事件。换句话说，它使用 .trigger .

现在 jQuery 使用 跟踪每个元素的事件处理程序(所有 .on 或 .bind 或 .click 等)。 _数据。这是因为there isn't any other way to get the event handlers绑定(bind)(使用.addEventListener)到一个元素。因此，触发方法实际上只是从 ._data(element, 'events') & ._data(element, 'handle')< 获取设置的事件监听器/处理程序 作为数组并运行它们中的每一个。

handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
if ( handle ) {
    handle.apply( cur, data );
}

( line 4548 )

这意味着无论上下文是什么，如果事件是通过 .addEventListener 绑定(bind)的，则它不会使用 .trigger 运行。这是一个例子。加载时仅记录 jquery(由 .trigger 触发)。如果您单击 a 元素，则两者都会运行。

$('a')[0].addEventListener('click', function(){console.log('addlistener');}, false);

$('a').on('click', function(){
    console.log('jquery');
});

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

DEMO

或者，您 can trigger an event在 javascript 中的元素上使用 fireEvent(即)和 dispatchEvent(非 ie)。 我不一定理解或知道 jQuery 的 .trigger 不这样做的原因，但他们可能有也可能没有。 a little more research 之后我发现他们不这样做，因为一些较旧的浏览器仅支持每个事件 1 个事件处理程序。

In general we haven't tried to implement functionality that only works on some browsers (and some events) but not all, since someone will immediately file a bug that it doesn't work right.

虽然我不推荐这样做，但您可以通过对引导代码进行最少的更改来解决这个问题。您只需确保首先附加下面的函数(否则您将让监听器触发两次)。

$(modalID).on('hidden.bs.modal', function (e, triggered) {
    var event; // The custom event that will be created

    if(!triggered){
        return false;
    }

    e.preventDefault();
    e.stopImmediatePropagation();

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent("hidden.bs.modal", true, true);
    } else {
        event = document.createEventObject();
        event.eventType = "hidden.bs.modal";
    }

    event.eventName = "hidden.bs.modal";

    if (document.createEvent) {
        this.dispatchEvent(event);
    } else {
        this.fireEvent("on" + event.eventType, event);
    }
});

最后将上面的 Twitter Bootstrap 行更改为:

that.$element.trigger('hidden.bs.modal', true)

这样您就知道它被触发了，而不是您在之后解雇自己的事件。请记住，我还没有在模态中尝试过此代码。尽管它在下面的 click 演示中确实可以正常工作，但它可能会或可能不会按模式的预期工作。

DEMO