jquery - Firefox does not report exception when using JavaScript DOMContentLoaded with document.addEventListener -
i writing internal framework can have no dependencies (i.e. jquery, etc.) , trying implement own dom ready-style functionality. seems when callback in ready queue (array of callbacks complete on dom ready), if exception thrown inside function, execution stops , continues onto next callback (which want), firefox not report error (log console, trigger onerror, anything). doing wrong?
i have implemented using combination of pattern dean edwards (http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/) , jquery source. not wish implement jquery because if 1 callback fails, subsequent callbacks won't execute.
var readycallbacks = []; (function () { var currenthandler, fireready, removeevents, loopcallbacks = function () { (var = 0, len = readycallbacks.length; < len; += 1) { currenthandler = readycallbacks[i]; fireready(); } }; if (document.addeventlistener) { document.addeventlistener('readyevents', function () { currenthandler(); }, false); fireready = function () { var readyevent = document.createevent('uievents'); readyevent.initevent('readyevents', false, false); document.dispatchevent(readyevent); }; removeevents = function () { window.removeeventlistener('load', loopcallbacks, false); loopcallbacks(); }; document.addeventlistener('domcontentloaded', removeevents, false); window.addeventlistener('load', loopcallbacks, false); } else { // if < ie 9 document.documentelement.readyevents = 0; document.documentelement.attachevent('onpropertychange', function (e) { if (e.propertyname === 'readyevents') currenthandler(); }); fireready = function () { document.documentelement.readyevents += 1; }; removeevents = function () { window.detachevent('onload', loopcallbacks); loopcallbacks(); }; document.attachevent('onreadystatechange', removeevents); window.attachevent('onload', loopcallbacks); } })(); client.ready = function (callback) { readycallbacks.push(callback); }; here test implementation. console written , dom element has been manipulated. in ie error undefined_variable++; shown in console, not in firefox.
<!doctype html> <html> <head> <script src="client.js"></script> <script> client.ready(function () { console.log('logging before error'); undefined_variable++; // not error in firefox console.log('logging after error, not logged in firefox'); }); client.ready(function () { console.log('before dom access'); document.getelementbyid('cheese').innerhtml = 'cheese'; console.log('after dom access'); }); </script> </head> <body> <div id="cheese">test</div> </body> </html>
after searching, appears known mozilla bug: errors thrown handlers custom events dispatched via dispatchevent() not logged in versions of firefox 3.x. isn't problem in code, in browser implementation. if it's real problem you, can wrap handler in try/catch block identify , deal errors:
document.addeventlistener('readyevents', function() { try { currenthandler() } catch (e) { console.log(e) } }, false); i have jsfiddle here demonstrates problem simplified set of tests. firefox correctly logs errors on handlers built-in events domcontentloaded , load, misses error when firing handler custom event.
Comments
Post a Comment