我试图在 IE8 上触发一个自定义事件，并从 here 中一起摆弄一个解决方案和 here .但是我无法让它工作......

我将 jquery mobile 与 requireJS 和谷歌分析一起使用。所以我正在跟踪 JQM pageshow 事件。然而，由于 requireJS 加载脚本是异步的，我对 pageshow 的绑定(bind)需要在 javascript“包装器”中进行，否则会产生错误，因为在解析代码段时 jquery 和 jquery mobile 都不会加载。

所以我在每一页的末尾都包含了这个:

if (document.addEventListener) {
    document.addEventListener("jqmReady",function(){trigAnalytics("jqmReady");alert("FF detected")},false); 
} else if ( document.attachEvent ) {
    document.attachEvent("jqmReady", function(){trigAnalytics("jqmReady");alert("IE detected")}); 
}

当检测到时，我将使用 pageshow 绑定(bind)触发我的分析片段:

var trigAnalytics = function( trigger ){ 
    $(document).on('pageshow','div:jqmData(role="page").basePage', function (event, ui) {
        var url = location.href; 
        try { 
            hash = location.hash; 
            if (hash && hash.length > 1) {
                 _gaq.push(['_trackPageview', hash.substr(1)]);
                 _gaq.push(['_setCustomVar', 1, 'id_external', ########, 1 ]);
            } else {
                _gaq.push(['_trackPageview', url]);
                _gaq.push(['_setCustomVar', 1, 'id_external', ########, , 1 ]);
                _gaq.push(['b._trackPageview', url]);
            } 
        } catch(err) { } 
    }); 
    if (typeof _gaq !== "undefined" && _gaq !== null) { 
        $(document).ajaxSend(function(event, xhr, settings){ 
            _gaq.push(['_trackPageview', settings.url]); 
            _gaq.push(['b._trackPageview', settings.url]);
        }); 
    } 
}; 

因此，为了启动事件链，我需要在 JQM 就绪时触发 jqmReady。 JQM 使用他们的 mobileinit 事件来表明这一点。所以在我的应用程序 Controller 初始化中，我像这样绑定(bind)它:

$(document).bind("mobileinit", function () {

    // non-IE OK
    if (document.createEvent) {
        evt = document.createEvent("Event");
        evt.initEvent("jqmReady", true, true);
        document.dispatchEvent(evt);

    } else if (document.createEventObject) { 
    // MSIE (NOT WORKING)

        document.documentElement.evt = 0; // an expando property
        document.documentElement.attachEvent("jqmReady", function () {
            document.documentElement.evt = document.documentElement.evt + 1;
            });
    }
});

我试过只触发 $(window).trigger('jqmReady')，因为当 mobileinit 触发时，jquery 可用。然而，在 addEventListener 中创建的事件似乎无法像这样被触发，所以我需要一个仅限 javascript 的解决方案来在 IE 中触发自定义事件。

问题:
有人可以指导我如何正确触发 IE8 的 javascript 自定义事件吗？

最佳答案

好吧，我终于明白了......这是它的工作原理:

1) 在正在加载的页面上为jqmReady设置监听

// non-IE: just create a listener for the custom event "jqmReady"
if (document.addEventListener) {
    document.addEventListener("jqmReady",function(){trigAnalytics("jqmReady");alert("FF detected")},false); 
// IE8
} else if ( document.attachEvent ) {

    // create a custom property name jqmReady and set it to 0
    document.documentElement.jqmReady = 0;
    // since IE8 does not allow to listen to custom events, 
    // just listen to onpropertychange
    document.documentElement.attachEvent("onpropertychange", function(event) {

        // if the property changed is the custom jqmReady property
        if (event.propertyName == "jqmReady") {
            trigAnalytics("jqmReady");
            alert("gotcha")
            // remove listener, since it's only used once
            document.documentElement.detachEvent("onpropertychange", arguments.callee);
        }
    });
}

所以在 IE8 上我没有监听自定义 jqmReady。相反，我为我的自定义属性 jqmReady

2) 然后在 mobileinit 上我像这样触发:

 // non-IE
 if (document.createEvent) {
      evt = document.createEvent("Event");
      evt.initEvent("jqmReady", true, true);
      document.dispatchEvent(evt);
 } else if (document.createEventObject) { // MSIE
      // just change the property 
      // this will trigger onpropertychange
      document.documentElement.jqmReady++;
 };

好主意(归功于 http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ )，也许其他人可以找到它的用途。

关于javascript - 如何在 IE8 中触发自定义 javascript 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13435008/