Event compatibility tables

Somewhere near the end of February I started working on my site again as a sort of therapy to get over my burn-out. I focused on the compatibility tables, which were in desperate need of an update; I hadn't published any major new versions since 2005. Besides, new browser versions are proliferating all over the place and people need to know what these browsers can and can’t do.

Today I can finally unveil my most ambitious update: the Events compatibility tables. All in all I think I spent two weeks’ of work on them; testing all common events not only in common situations, but also in unusual ones. A quick test of basic browser support for W3C and Microsoft events completed this series of tests.

Creating the test pages was a major chore that swallowed more and more time as they progressed; I’m still not sure if what I did was smart or too smart. Anyway, they’re done now and will remain mostly unchanged for at least a year.

Unfortunately the testing of the load and unload events didn’t really fit the test format I devised; therefore information on these events is still lacking. (They generally work fine, though.)

Now only the Events properties table remains to be done, but first I’m going to take a well-deserved break from event testing.

Comments

1 Posted by Rik on 30 April 2008 | Permalink

Thanks for this update ! Huge work !

However, you're only testing onchange events on select with a single line. The behaviour is completely different with multiline select. For example, most browsers fire this event every time another option is selected (with the mouse, with the arrows, with the keyboard).

I've filled a bug for webkit with a simple testcase.
https://bugs.webkit.org/show_bug.cgi?id=18337

2 Posted by Sergey Ilinsky on 30 April 2008 | Permalink

I think your work is good for the start. It gives a nice high-level overview of the events supported in different browsers. However you do not have a significant portion of information on browsers quirks in events sequencing/ordering, events default actions implementation etc. Also you are missing fundamental DOM events: DOMNodeInsertedIntoDocument/DOMNodeRemovedFromDocument events.

In the Backbase framework we have solved all browsers quirks related to events implementation/handling by having entire DOM Events (Level-3) specification implemented.

3 Posted by GreLI on 30 April 2008 | Permalink

Easily focused/blured on link in Opera 9.27 using single-key hotkeys "a" and "q". You can use also "w", "s" and "e", "d" to focus on different elements.

For link it says:
focus on a
blur on a
focus on a
(on focus)

blur on a
(on blur)

Focusing with mouse is more tricky (for me it worked only when I clicked on link first time).

Hope this helps.

4 Posted by centrinoblue on 1 May 2008 | Permalink

Thanks PPK, I have appreciated your work for a number of years now.

Sergey, you seem pretty happy with yourself for your Backbase framework support for events.

However, after spending the better part of the last year trying to implement the Backbase framework (the decision to go with Backbase was made before I got here), I can truly say it has been one of the worst programming experiences of my career.
The decision to prevent developers from using tools like Firebug to set breakpoints and step through the client code makes development a real chore. So what you may gain in event handling support is more than taken away by the clumsy and ineffective debugging capabilities.

Sorry for going on a tangent but it has been a(nother) long and frustrating day with the 'base and I couldn't help but resopond.

5 Posted by ppk on 1 May 2008 | Permalink

I admit I never saw the point of multiple selects. I've been working as a front-end programmer for ten years now, and I NEVER used them even in a single paying site. So these tests ignore them.

I tested DOMNodeInsertedIntoDocument and DOMNodeRemovedFromDocument and concluded they aren't supported by any browser.

As to the Opera shortcut keys: they are sometimes ridiculously complicated and don't follow the de facto standard of the other browsers. So I missed these shortcuts. I only test Ctrl+arrow in Opera.

6 Posted by Thomas Broyer on 5 May 2008 | Permalink

Thanks a lot for all your compatibility tables, they're a golden mine for us poor lonesome developers.

I'd just add a note in the "mousewheel" section about Mozilla's DOMMouseScroll event that's almost equivalent...

7 Posted by ppk on 5 May 2008 | Permalink

Thanks for the tip, Thomas. DOMMouseScroll event added.

The question is: why isn't this event mentioned in Mozilla's official documentation?

8 Posted by Rik on 5 May 2008 | Permalink

What's the point of doing compatibility tables only for the events you're using ?

Multiline selects are widely used, on travelling websites for example. Or maybe on every Bugzilla out there.

9 Posted by Ryan Cannon on 5 May 2008 | Permalink

I noted your comments about mouseenter and mouseleave not being implemented across the non-IE browsers. There's also no ticket in the bugzilla at WebKit's or Mozilla's sites (I checked). I imagine an ambitious soul could find Microsoft's documentation for those events, create a simple test case, and file those respective bugs.

10 Posted by Neil Craig on 7 May 2008 | Permalink

I am with you 100% on mouseenter and mouseleave...these events would make programming of animated menus so, so easy like it is in Flash.

We should all bug the developers of Fx, Opera and Safari/Konq now!!!

11 Posted by Neil Craig on 7 May 2008 | Permalink

Also, just to say I added a feature request on Bugzilla and will do the same on Webkit.

12 Posted by Sergey Ilinsky on 10 May 2008 | Permalink

Neil, There is an easy way to derive mouseenter/mouseleave events from the mouseover/mouseout events: check in the handler whether relatedTarget of the event is the parent of the currentTarget.

13 Posted by Pebbles on 15 May 2008 | Permalink

So, when all is said and done, which browser do you think has the fewest problems with compatability issues? My sister has been trying to get me to stop using IE and go to Firefox, but looking at your work I'm not sure that is the way to go!

BTW, I was really impressed with all the work you've done on this issue! Good job!

14 Posted by Nate on 20 May 2008 | Permalink

*Thanks you* for all the work that went into this site. I use it almost every day for work and my own projects!
I made a custom scrollbar class ( http://nsfdesigns.com ) using what I learned from mostly this site and a few others.