javascript – Twitter Bootstrap.为什么模态事件在JQuery中工作但在纯JS中不起作用？

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吗？为什么？

谢谢,
道格

解决方法:

这背后的原因是因为Twitter Bootstrap使用.$element.trigger(‘hidden.bs.modal’)(line 997)来触发它的事件.换句话说,它使用.trigger.

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

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

(line 4548)

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

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

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

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

DEMO

或者,您使用fireEvent(即)&amp ;;在javascript中使用can trigger an event元素. 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.

虽然我不推荐它,但你可以通过对bootstraps代码进行少量更改来解决这个问题.你只需要确保首先附加下面的函数(或者你将有两次触发器).

$(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)

这是因为你知道它被触发而不是你自己解雇的事件.请记住,我没有尝试过使用模态的代码.虽然它在下面的点击演示中确实可以正常工作,但它可能会或可能不会按照预期的模态工作.

DEMO

标签：javascript,jquery,twitter-bootstrap-3
来源： https://codeday.me/bug/20190927/1822378.html