如何在IE8中触发自定义javascript事件？

我试图在IE8上启动一个自定义事件，并从和中修改一个解决方案。但我不能让它工作

我正在使用jquery mobile与requireJS和google analytics。所以我正在跟踪JQM

pageshow

事件。但是，由于requireJS异步加载脚本，因此需要在javascript“包装器”中绑定到pageshow，否则会产生错误，因为在解析代码段时，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绑定触发我的分析片段：

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

事件来表示这一点。因此，在我的应用程序控制器init中，我像这样绑定到它：

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

triggers时，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上，我没有收听custom

jqmReady

。相反，我会监听我的自定义属性的

onpropertychange

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++;
 };

---

好主意（值得称赞），也许其他人可以使用它。

对于其他感兴趣的人，我已经将此代码包装到一个静态javascript对象中

function Event () {
}

Event.listen = function (eventName, callback) {
    if(document.addEventListener) {
        document.addEventListener(eventName, callback, false);
    } else {    
        document.documentElement.attachEvent('onpropertychange', function (e) {
            if(e.propertyName  == eventName) {
                callback();
            }            
        });
    }
}

Event.trigger = function (eventName) {
    if(document.createEvent) {
        var event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
        document.dispatchEvent(event);
    } else {
        document.documentElement[eventName]++;
    }
}

用法：

Event.listen('myevent', function () {
    alert('myevent triggered!');
});

Event.trigger('myevent');

演示：

---

为什么不将触发器放在$（document）.ready（）中？为什么您需要它？因为运行此代码时，

jquery

~$（document）.ready（）将不可用。该代码段就在requireJS初始化之后出现在页面上。因此，（1）页面被解析，（2）requireJS触发器，（3）我的代码片段被执行。当它这样做时，

jquery

或

jquery mobile

都不会完全加载。所以，只能是javascript。我不确定我是否理解你的问题（因此是评论，而不是回答），但是否相关？哪部分不清楚？底线是我需要找到一种方法来触发一个只在javascript中的自定义事件，它在IE8上工作。让我检查一下

dispatchEvent

@frequency，啊哈哈jquery mobile。。。。重要提示：使用$（document.bind（'pageinit'），而不是$（document.ready（））。您可以添加一个

.remove

方法来正确处理自定义事件。您应该在要点的第34行中阐明您的操作，以摆脱eval语句

document.documentElement[eventName]++

onpropertychange的一个缺点是它不会冒泡。您必须提前知道哪个元素的属性发生了更改。更多信息请访问