Which hooks are provided in jQuery?

Question

Officially only $.cssHooks is documented in jQuery API documentation, and $.valHooks is mentioned in a sentence for a workaround to a known issue in .val().

I wonder how many hooks are there in jQuery besides of these 2, and should we use $.valHooks in our plugin development? If so, I think it should be documented as a dedicated topic instead of one-sentence only.

Answer 1

There are 8 different types of exposed hooks.

There is one more for internal usage only (which is exposed) - jQuery._queueHooks().

There are also two other hooks: nodeHook and boolHook which are used internally and their functionality is basically embedded into jQuery.attrHooks and jQuery.valHooks.

Here are the important ones:

• jQuery.attrHooks

  • Setting the type on a radio input after the value resets the value in IE6-9.
  • Set contenteditable to false on removals (Bug #10429).
  • Set width and height to auto instead of 0 on empty string (Bug #8150)
  • Some attributes require a special call on IE - href, src, width and height.
  • Return undefined in the case of empty string for the style attribute.
  • Fix get/set for the value property in old IE
  • When reading attribute values if no hook is defined it uses either boolHook or nodeHook (which is the same as jQuery.valHooks.button).
  • Could be used to attach additional hooks when getting/setting an attribute of an element.

   

• jQuery.propHooks

  • href/src properties should get the full normalized URL (Bug #10299, Bug #12915).
  • Fix for "Safari mis-reports the default selected property of an option".
  • Could be used to attach additional hooks when getting/setting a property of an element.

   

• jQuery.Tween.propHooks

  jQuery.Tween is used for animations and such.

  • Fix for scrollTop and scrollLeft in IE8 - will be removed in jQuery 2.0.
  • Other animation stuff.

   

• jQuery.cssHooks

  Add in style property hooks for overriding the default behavior of getting and setting a style property.

  • Fix for getting/setting the value of the CSS property opacity.
  • Fix for getting witdth and height depending on the display property.
  • Fix for setting width and height depending on the box-sizing property.
  • Fix for getting margin-right.
  • Fix for Webkit Bug #29084 - getComputedStyle returns percent when specified for top/left/bottom/right
  • Used in jQuery.fn.animate to expand specified style properties like margin, padding and border.
  • Used in other various jQuery.fn.animate related stuff.
  • Setting various background CSS properties to inherit is achieved without using jQuery.cssHooks, because it is shorter this way.
  • Could be used to attach additional hooks when getting/setting an individual style property of an element.

   

• jQuery.valHooks

  • Fixes a Blackberry 4.7 bug for option elements (Bug #6932).
  • Used for reading selected value for select elements.
  • Fixes reading some properties of the button element - id, name and coords. The same as nodeHook (see above).
  • Fixes the incompatibility on checking radio and checkbox inputs between Webkit and others.
  • Could be used to attach additional hooks when getting/setting the value of an input element.

   

• jQuery.event.fixHooks

  A holder for jQuery.event.mouseHooks and jQuery.event.keyHooks which require fixing and normalizing based on the support of the current browser.

• jQuery.event.mouseHooks

  • Used to transfer some properties from the original MouseEvent to the jQuery event object.
  • Normalizes event.which (which mouse button was used) accross browsers, because event.button is not normalized.
  • Calculates pageX, pageY, clientX, clientY and others if missing and set them to the jQuery event object.

   

• jQuery.event.keyHooks

  • Used to transfer some properties from the original KeyboardEvent to the jQuery event object.
  • Normalizes event.which (the character code of the button which was pressed) across browsers. In the original event it could be char, charCode, key or keyCode.

From the jQuery 1.9.1 source.