javascript - trick to detect bubbling supportability

Event delegation is oe of the best techniques for developing high performance, scalable, web application. the basical idea is instead of directly bind to the elements they wish to watch - with event delegation bind to an ancestor element (such as a tabe or the entire document) and watch for all events that come in . In this way you only have to bind one event handler for a large number of elements. This technique makes good use of the event bubbling provided by the browser. Since the events will bubble up the tree we can simply bind to that once ancestor element and wait for the events to come in.

 

Since event bubbling is the only technique available across all browsers (event capturing only works in W3C compatible browsers). 

 

However, unfortunately, submit, change, focus, and blur events have serious problems with the bubbling implementation, in various browser, and must be worked around.

 

To start, the submit and change events don't bubble at all in Internet Explorer. (unlike in the W3C DOMcapable browsers where they bubble consistently).  We need some technique which is capable of determing if an event is  capable of bubbling up to a parent element.

 

 

/**************************************
*@Name: addremoveevents.js
*  this is an code that determine if an event support bubbling
*@Summary
* 
* @todo:
*   Test
***************************************/

function isEventSupported(eventName) {
  var el = document.createElement('div'), isSupported;

  eventName = 'on' + eventName;

  isSupported = (eventName in el); // this is a special use of in operator

  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }

  el = null;
  return isSupported;
}