IE8 में कस्टम जावास्क्रिप्ट ईवेंट कैसे ट्रिगर करें?

Question

मैं आईई 8 पर एक कस्टम इवेंट फायर करने और here और here से एक समाधान को हल करने की कोशिश कर रहा हूं। लेकिन मैं इसे काम करने के लिए नहीं मिल सकता ...

मैं jquery मोबाइल का उपयोग jJ और google analytics के साथ कर रहा हूं। तो मैं जेक्यूएम pageshow घटना को ट्रैक कर रहा हूं। हालांकि आवश्यकता के बाद जेएस स्क्रिप्ट एसिंक लोड करता है, पेजशो के लिए मेरे बाध्यकारी को जावास्क्रिप्ट "रैपर" में बनाया जाना चाहिए, अन्यथा यह एक त्रुटि उत्पन्न करेगा, क्योंकि न तो jquery और न ही jquery मोबाइल को स्निपेट पार्स किए जाने तक लोड किया जाएगा।

तो मैं हर पृष्ठ के अंत में इस सहित कर रहा हूँ:

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]); 
     }); 
    } 
}; 

तो करने के लिए इवेंट चेन का किक, जब मुझे जेक्यूएम तैयार हो तो मुझे 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; 
      }); 
    } 
}); 

मैं बस, $ (विंडो) .trigger ('jqmReady') को ट्रिगर क्योंकि mobileinit चलाता, jQuery उपलब्ध है जब की कोशिश की है। हालांकि ऐसा लगता है कि addEventListener में बनाई गई घटनाओं को इस तरह ट्रिगर नहीं किया जा सकता है, इसलिए मुझे IE में एक कस्टम ईवेंट ट्रिगर करने के लिए जावास्क्रिप्ट-केवल समाधान की आवश्यकता है।

प्रश्न:
कोई मुझे कैसे IE8 के लिए एक जावास्क्रिप्ट कस्टम घटना को सही ढंग से गति प्रदान करने पर एक सूचक दे ​​सकते हैं?

Answer 1

ठीक है, मैं अंत में समझ में ... यहाँ है कि यह कैसे काम करता है:

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 पर मैं इस तरह ट्रिगर कर रहा हूँ के लिए onpropertychange के लिए सुनने:

// 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/ को ऋण), हो सकता है किसी और इसके लिए एक प्रयोग पा सकते हैं ।

Answer 2

किसी और रुचि के लिए, मैं एक स्थिर जावास्क्रिप्ट वस्तु में इस कोड को ऊपर लपेट लिया है

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

डेमो: http://jsfiddle.net/c5CuF/