Twitter引导程序.为什么模态事件在JQuery中起作用，而在纯JS中却不起作用? [英] Twitter Bootstrap. Why do modal events work in JQuery but NOT in pure JS?

问题描述

Twitter Bootstrap模态对话框具有一组可与回调一起使用的事件.

The Twitter Bootstrap modal dialog has a set of events that can be used with callbacks.

这是jQuery中的一个示例:

Here is an example in jQuery:

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

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

但是，当我将此方法转换为JS时，事件'hidden.bs.modal'不起作用.使用'点击'确实可以:

However, when I transcribe this method to JS the event 'hidden.bs.modal' does not work. Using 'click' does work:

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

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

这些Bootstrap事件仅可用于jQuery吗?为什么?

Are these Bootstrap events only useable with jQuery? Why?

谢谢，
道格

推荐答案

其背后的原因是因为Twitter Bootstrap使用that.$element.trigger('hidden.bs.modal')( .trigger .

The reasoning behind this is because Twitter Bootstrap uses that.$element.trigger('hidden.bs.modal')(line 997) to trigger it's events. In other words it uses .trigger.

现在jQuery使用._data跟踪每个元素的事件处理程序(所有.on或.bind或.click等).这是因为没有其他方法可以获取(使用.addEventListener)绑定到元素.因此，触发方法实际上只是从._data(element, 'events')& ._data(element, 'handle')作为数组并运行它们中的每个.

Now jQuery keeps track of each element's event handlers (all .on or .bind or .click etc) using ._data. This is because there isn't any other way to get the event handlers that are bound (using .addEventListener) to an element. So the trigger method actually just get's the set event listener(s)/handler(s) from ._data(element, 'events') & ._data(element, 'handle') as an array and runs each of them.

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

(第4548行)

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

This means that no matter what context is, if an event is bound via .addEventListener it will not run using .trigger. Here's an example. On load only jquery will be logged (triggered by .trigger). If you click the a element though, both will run.

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

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

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

演示

或者，您可以使用fireEvent(ie)& dispatchEvent(非即). 我不一定了解或不知道jQuery .trigger不这样做的原因，但是他们可能没有.在

Alternatively, you can trigger an event on an element in javascript using fireEvent(ie) & dispatchEvent(non-ie). I don't necessarily understand or know the reasoning of jQuery's .trigger not doing this, but they may or may not have one. After a little more research I've found that they don't do this because some older browsers only supported 1 event handler per event.

通常，我们没有尝试实现仅适用于某些浏览器(和某些事件)但不适用于所有浏览器的功能，因为有人会立即提交一个无法正常使用的错误.

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.

尽管我不建议这样做，但是您可以通过对引导程序代码进行最少的更改来解决此问题.您只需要确保首先附加了以下功能(否则您的监听器将触发两次).

Although I do not recommend it, you can get around this with a minimal amount of changes to bootstraps code. You would just have to make sure that the function below is attached first (or you will have listeners firing twice).

$(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行从上方更改为:

Finally change the Twitter Bootstrap line from above to:

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

这是为了让您知道它被触发了，而不是您之后开除自己的事件.请记住，我还没有在模态中尝试过此代码.尽管它在下面的click演示中确实可以正常工作，但它可能与模态一起无法正常工作.

This is so you know its being triggered and not the event that you're firing yourself after. Please keep in mind I have not tried this code with the modal. Although it does work fine on the click demo below, it may or may not work as expected with the modal.

演示

这篇关于Twitter引导程序.为什么模态事件在JQuery中起作用，而在纯JS中却不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！