To override an inline event on a given DOM element, first determine which attribute defines the event.
For example, onclick, or onkeypress.
Next, determine which jQuery event corresponds to the inline attribute. This will be passed to jQuery's .bind() method. For example, click and keypress (notice the subtle difference).

Given the following HTML:
<button id="myButton" onclick="doWork()">Do Some Work</button>

To simply convert the inline event to a jQuery "click" subscription, use the following syntax:
$('#myButton').override('onclick', 'click');

To override myButton's onclick event, with the option to invoke old behavior, use the syntax below.
The callback will be passed 3 variables: oldFunction, jQueryElement and arguments.
The oldFunction argument is an invoker for the old function. If no arguments are passed to oldFunction(), then the original inline event code will be invoked with the proper this context and any arguments that it would have originally received.
$("#myButton").override("onclick", "click", function (oldFunction, jQueryElement, arguments) {
	if(oldBehavior && !newArguments) {
		//The old function can be invoked here with original arguments and 'this'
		return oldFunction();
	} else if(oldBehavior && newArguments) {
		//The old function can be invoked with new arguments as well
		return oldFunction(foo, bar);
	} else if(!oldBehavior) {
		//The old function can also be completely ignored
		alert('Hi from overridden behavior!');
		return false;

An element's state can also be restored (as though override had not been called).
If multiple events are overridden on an element, specific events can be restored.
To restore a specific event, such as onclick, use the following syntax:
$('#myButton').override('restore', 'onclick');

To restore all inline events, use the following syntax:

Last edited Dec 24, 2012 at 8:03 PM by aikeru, version 1


No comments yet.