Pointless to mention that IE8 is probably the biggest one so here I am with some good news!
W3C DOM Level 2 Implemented In IE8
You read that properly, including custom bubbling events!This is how much this ambitious but overall slim project is about, trying to harmonize IE8 and IE8 only so that we can focus more on standard W3C DOM API without requiring any external library at all unless necessary.
Tests To The Rescue
If you don't believe it or you would like to try it in a real IE8 (no simulated) browser, here the interactive link that will work with all modern Desktop and Mobile browsers plus IE8 thanks to the mentioned library.The test is interactive in the meaning that at some point an action, a real one from the user, is expected such a
click
, an input focus
or an input blur
so that all tests, synthetics and not, are properly tested and behaves as expected.
Readapting W3C Style
The old IE8 gotchas are still there where the most disturbing one in this case is the following:element.addEventListener( 'x:event', function problem(e) { element.removeEventListener( 'x:event', problem, false ); }, false );Above example will fail in IE8 because of the expression bug that creates an outer scope reference to a declared function. In few words, the assigned method won't be
problem
but it's referenced expression.
var really = function problem() {}; // only in IE < 9 alert(typeof problem === 'function' && // note these are different problem !== really ); // trueUnbelievable? Well, an old gotcha already demystified where we have 3 easy solutions:
// first solution var solved; element.addEventListener( 'x:event', solved = function solved(e) { element.removeEventListener( 'x:event', solved, false ); }, false ); // second solution element.addEventListener( 'x:event', function(e) { element.removeEventListener( 'x:event', arguments.callee, false ); }, false );Well, yes,
arguments.callee
is still a thing and a very important and useful one in IE less than 9 world: go for it if you are supporting this browser!A third solution reminded me by David is the following, based on function declaration only:
// third solution function solved(e) { this.removeEventListener( e.type, solved, false ); } element.addEventListener( 'x:event', solved, false );
2 comments:
AG ~ How about this?
function solved(e) {
element.removeEventListener(
'x:event', solved, false);
};
element.addEventListener(
'x:event', solved, false);
yup, updated, thanks!
Post a Comment