HTML and CSS Reference
In-Depth Information
Events are an integral part of most client-side web page enhancements. Most events
in common use today have been available for a long time, and for most simple cases,
testing for them won't add much. However, as new events introduced by, e.g., the
HTML5 spec start gaining ground, we can easily find ourselves in a situation in
which we are unsure whether or not using a certain event is safe. If the event is
fundamental to the use of the enhancement we're building, we'd better test for it
before we possibly mangle the web page for unsuspecting visitors. Another case is
genuinely useful proprietary events such as Internet Explorer's
mouseenter
and
mouseleave
events.
Using proprietary events, or avoiding use of buggy or non-existent events, is
one of those cases in which browser sniffing still is widely used. Even though some
events can be tested for by triggering them programmatically, this does not hold for
all events, and doing so is often cumbersome and error-prone.
Juriy Zaytsev of perfectionkills.com has released an
isEventSupported
util-
ity that makes feature testing events a breeze. Not only is using the utility simple,
the implementation is based on two very simple facts as well:
•
Most modern browsers expose a property corresponding to supported
events on element objects, i.e.,
"onclick" in document.
documentElement
is
true
in most browsers whereas
"onjump" in
document.documentElement
is not.
•
Firefox does not expose same-named properties as the events an element
supports. However, if an attribute named after a supported event is set on an
element, methods of the same name are exposed.
In and of itself a simple concept, the hard part is discovering it. Some browsers
require relevant elements to test on in order for this to work; testing for the
on-
change
event on a
div
element will not necessarily uncover if the browser sup-
ports
onchange
. With this knowledge, we can peruse Juriy's implementation in
Listing 10.11.
Listing 10.11
Feature detecting events
tddjs.isEventSupported = (function () {
var TAGNAMES = {
select: "input",
change: "input",
submit: "form",
