Twitter的引导.为什么模态事件在JQuery中工作，而不是在纯JS中

Twitter Bootstrap. Why do modal events work in JQuery but NOT in pure JS?

本文关键字：工作 JS JQuery 为什么 事件 模态 Twitter      更新时间：2023-09-26

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使用that.$element.trigger('hidden.bs.modal')(第997行)来触发它的事件。换句话说，它使用.trigger。

现在jQuery使用._data跟踪每个元素的事件处理程序(所有.on或.bind或.click等)。这是因为没有任何其他方法可以获得绑定(使用.addEventListener)到元素的事件处理程序。因此，触发器方法实际上只是从._data(element, 'events') &._data(element, 'handle')作为一个数组并运行它们。 
handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
if ( handle ) {
    handle.apply( cur, data );
}

(第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');

演示

或者，你可以在javascript中使用fireEvent(即)&dispatchEvent(非ie)。我不一定理解或知道jQuery的.trigger不这样做的原因，但他们可能有，也可能没有。经过更多的研究，我发现他们不这样做，因为一些旧的浏览器只支持每个事件1个事件处理程序。

一般来说，我们没有尝试实现只在一些浏览器(和一些事件)上工作的功能，但不是所有的，因为有人会立即提交一个错误，它不能正常工作。

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

$(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演示中工作得很好，但它可能会或可能不会像预期的那样与模态一起工作。

演示

原生Javascript解决方案。这是我不使用JQuery的方法。

//my code ----------------------------------------
export const ModalHiddenEventListener = (el, fn, owner) => {
    const opts = {
        attributeFilter: ['style']
    },
    mo = new MutationObserver(mutations => {
        for (let mutation of mutations) {
            if (mutation.type === 'attributes' 
            && mutation.attributeName ==='style' 
            && mutation.target.getAttribute('style') === 'display: none;') {
                mo.disconnect();
                fn({
                    owner: owner,
                    element: mutation.target
                });
            }
        }
    });
    mo.observe(el, opts);
};
//your code with Bootstrap modal id='modal'------- 
const el = document.getElementById('modal'),
      onHide = e => {
          console.log(`hidden.bs.modal`); 
      };
ModalHiddenEventListener(el, onHide, this);

兼容性:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe Browser_compatibility

相关文章：