Skip to content

Getting blur, focus and change (in ie) events to bubble using the Motionbox Event Handler

by Topper on April 16th, 2008

UPDATE: We have solved this out of the box in the Motionbox EventHandler now:

You might notice that blur, focus and change events do not necessarily bubble. At Motionbox we use the following hack to subscribe to all form fields at dom ready and then fire custom events so you maintain the same interface to events as everything else.

We do two things in the JS that won’t work for you out-of-the box

  1. Fire a custom event “domReady” using a script tag right before the tag
  2. Sniff the browsers ourself. However – you could use Prototype.browser

[js]

MOBX.EventSubscriberHacks = function () {
var publicObj = {};

var formElements = [“input”, “select”, “textarea”];

var subscribeToFocus = function (el) {
$(el).stopObserving(“focus”, fireFocus);
$(el).observe(“focus”, fireFocus);
};

var subscribeToBlur = function (el) {
$(el).stopObserving(“blur”, fireBlur);
$(el).observe(“blur”, fireBlur);
};

var subscribeToChange = function (el) {
$(el).stopObserving(“change”, fireChange);
$(el).observe(“change”, fireChange);
};

var fireFocus = function (evt) {
MOBX.EventHandler.fireCustom(evt.element(), “focus”);
};

var fireBlur = function (evt) {
MOBX.EventHandler.fireCustom(evt.element(), “blur”);
};

var fireChange = function (evt) {
MOBX.EventHandler.fireCustom(evt.element(), “change”);
};

var setupObservers = function () {
formElements.each(function(tag) {
$$(tag).each(subscribeToFocus);
$$(tag).each(subscribeToBlur);
if (MOBX.browser.ie) {
$$(tag).each(subscribeToChange);
}
});
};

MOBX.EventHandler.subscribe(MOBX.cssNamespace, “domReady”, setupObservers);

MOBX.EventHandler.subscribe(MOBX.cssNamespace, “new_dom_content”, setupObservers);

publicObj.refresh = function () {
setupObservers();
};

return publicObj;
}();
[/js]