My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Wednesday, July 24, 2013

IE8 Is More W3C Standard

I know I am probably late for this party but I am re-exploring here and there Desktop web development and developers approach to common Desktop problems.
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
);
// true
Unbelievable? 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
);

eddy.js Is Available Too

That's correct, the eddy test page you might want to test with IE8 too should be completely green which means that IE8 could use without problems the eddy.js core library: isn't this awesome?

2 comments:

David F Kaye said...

AG ~ How about this?

function solved(e) {
element.removeEventListener(
'x:event', solved, false);
};

element.addEventListener(
'x:event', solved, false);

Andrea Giammarchi said...

yup, updated, thanks!