Decoding jQuery – $.support: DOM Level 2 Event Bubbling and Detection

In the Decoding jQuery series, we will break down every single method in jQuery, to study the beauty of the framework, as an appreciation to the collective/creative geniuses behind it.

jQuery.support
jQuery.support is a collection of properties that represent the presence of different browser features or bugs. All the support methods are inside support.js.

1. event types
DOM Level 2 has 5 event types, below is the breakdown of the types and events belong to each type:

Event modules
Type Events
User Interface events DOMFocusIn, DOMFocusOut, DOMActivate
Mouse events click, mousedown, mouseup, mouseover, mousemove, mouseout
Key events not specified in DOM Level 2
Mutation events DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified
HTML events load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll

2. event support testing
DOM specification offers no standard way to detect browser support of events. In the past, people have been using browser sniffing, but such method can be quite unreliable. Juriy Zaytsev blogged about a method that could detect most of the DOM L2 events. The trick is that many modern browsers report property corresponding to an event name as being existent in an element:

'onclick' in document.documentElement; // true
'onclick2' in document.documentElement; // false

The problem with the above method is that Firefox doesn’t support it and browsers don’t always allow testing an arbitrary event on an arbitrary element. It was discovered that browsers create methods on an element when an attribute with the name corresponding to a “known” event is set on that element.

var el = document.createElement('div');

el.setAttribute('onclick', 'return;');
typeof el.onclick; // "function"

el.setAttribute('onclick2', 'return;');
typeof el.onclick2; // "undefined"

A robust way to detect support could be created by combining the two above method, as seen in jQuery source:

  function isMouseEventSupported(eventName) {
    var el = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
      el.setAttribute(eventName, 'return;');
      isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
  }

3. jQuery.support and event bubbling
DOM Level 2 Events specification suggests that the events propagate in three phases: capturing, at target, and bubbling. Firefox, Opera, and Safari implemented the three phases, but IE kept only the bubbling. We don’t have to care about capturing and at target. The focus is bubbling. submit, change and focusin events should bubble up the DOM tree, as required by the W3C DOM event model.

if ( div.attachEvent ) {
  for( i in {
    submit: 1,
    change: 1,
    focusin: 1
  } ) {
    eventName = "on" + i;
    isSupported = ( eventName in div );
    if ( !isSupported ) {
      div.setAttribute( eventName, "return;" );
      isSupported = ( typeof div[ eventName ] === "function" );
    }
    support[ i + "Bubbles" ] = isSupported;
  }
}

Here is how you could test if the bubbling is supported:

console.log(
  'submitBubbles: ' + jQuery.support.submitBubbles+'\n' + 'changeBubbles: ' + jQuery.support.changeBubbles+'\n' + 'focusinBubbles: ' + jQuery.support.focusinBubbles+''
);

Reference:
Document Object Model Events – http://www.w3.org/TR/DOM-Level-2-Events/events.html
jQuery.support API – http://api.jquery.com/jQuery.support/
jQuery support.js on github – https://github.com/jquery/jquery/blob/master/src/support.js

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in JavaScript and tagged . Bookmark the permalink.

One Response to Decoding jQuery – $.support: DOM Level 2 Event Bubbling and Detection

  1. Pingback: Elegant D » Decoding jQuery – jQuery.support and DOM Level 2 Events | Shi …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>