How do I polyfill an attribute in JavaScript?

Question

Given an attribute on an event that will be browser prefixed, I'd like to create a polyfill that makes it appear unprefixed.

E.g. the interface FooEvent has an attribute webkitBar that I'd like to make appear as just bar so that handlers could be written as onFoo = function(e) { console.log(e.bar); }

My clumsy initial guess is to inject something into the prototype FooEvent.prototype.getBar = function() { return this.webkitBar; }. But, I'm not certain how.

Answer 1

ES5 only (and IE8)

Object.defineProperty(FooEvent.prototype, "bar", {
  get: function () {
    return this.webkitBar;
  },
  configurable: true
});

Be warned that extending host objects. (FooEvent is a host object) has unknown side effects and is a big bag of undefined behaviour.

I'd recommend static wrappers

var eventUtil = {
  getBar: function (ev) {
    return ev.webkitBar;
  }
}

function handler (e) {
  var bar = eventUtil.getBar(e);
}

Answer 2

You could register a "first" handler to the event to do the transformation:

function adaptsBar(e) {
  e.bar = e.webkitBar;
}

Answer 3

This is a good resource to get you started.

http://addyosmani.com/blog/writing-polyfills/