HTML and CSS Reference
In-Depth Information
supporting browsers, and
runtimeStyle
in Internet Explorer to check if the
browser accepts specific values for various properties. The method can be found at
As illustrated throughout this chapter, event handling is not a cross-browser picnic.
To see a more complete example of how to utilize feature detection to harden
scripts, we will add a cross-browser
addEventHandler
function to the
tddjs
namespace, which we will use in Part III,
Real-World Test-Driven Development in
JavaScript.
The API will only be created if the current environment is deemed able
to support it.
The method needs either
addEventListener
or
attachEvent
to work.
Falling back to event properties is not sufficient unless we build a registry on top
of them, allowing
addEventHandler
still to accept several handlers for an event
on a specific element. This is possible, but considering the browser's such a solution
would likely target, probably not worth the effort or the added weight. Further, we
test for
Function.prototype.call
, which is needed in the
attachEvent
branch. The final method can be seen in Listing 10.14.
Listing 10.14
Feature detection based cross-browser event handling
(function () {
var dom = tddjs.namespace("dom");
var _addEventHandler;
if (!Function.prototype.call) {
return;
}
function normalizeEvent(event) {
event.preventDefault = function () {
event.returnValue = false;
};
event.target = event.srcElement;
// More normalization
return event;
}
