如何在 IE8 中触发自定义 javascript 事件? [英] How to trigger a custom javascript event in IE8?

问题描述

我正在尝试在 IE8 上触发一个自定义事件并从 此处 和此处.但我无法让它工作......

I'm trying to fire a custom event on IE8 and fiddling a solution together from here and here. But I cannot get it to work...

我使用 jquery mobile 和 requireJS 和 google 分析.所以我正在跟踪 JQM pageshow 事件.然而，由于 requireJS 异步加载脚本，我对 pageshow 的绑定需要在 javascript包装器"中进行，否则会产生错误，因为在解析片段时，jquery 和 jquery mobile 都不会被加载.

I'm using jquery mobile with requireJS and google analytics. So I'm tracking the JQM pageshow event. However since requireJS loads scripts async, my binding to pageshow needs to be made in a javascript "wrapper", otherwise it will produce an error, because neither jquery nor jquery mobile will have been loaded by the time the snippet is parsed.

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

So I'm doing including this at the end of every page:

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 绑定触发我的分析代码片段:

And when detected, I'm firing my analytics snippet with the pageshow binding:

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 事件来表明这一点.所以在我的应用程序控制器初始化中，我像这样绑定到它:

So to kick of the event chain, I need to trigger jqmReady when JQM is ready. JQM uses their mobileinit event to indicate just that. So inside my application controller init, I'm binding to it like so:

$(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 中的自定义事件.

I have tried just triggering $(window).trigger('jqmReady'), because when mobileinit triggers, jquery is available. However it seems events created in addEventListener can not be triggered like this, so I need a javascript-only solution to trigger a custom event in IE.

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

Question:
Can someone give me a pointer on how to trigger a javascript custom event for IE8 correctly?

推荐答案

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

Ok, I finally understand... here is how it works:

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

1) setting the listener for jqmReady on the page being loaded

// 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

So on IE8 I'm not listening for custom jqmReady. Instead I listen for onpropertychange for my custom property jqmReady

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

2) Then on mobileinit I'm triggering like this:

 // 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/)，也许其他人可以找到它的用途.

Nice idea (credit to http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/), maybe someone else can find a use for it.

这篇关于如何在 IE8 中触发自定义 javascript 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！