Hooker documentation

Hooker 'hooks' your own custom functions into an event triggered by an element. Hooker can respond to the following events:

  • click (or keypress)
  • keypress
  • change (for a select element)
  • mouseover
  • mouseout
  • submit (for a form element)
  • focus
  • blur

Each event type has its own Hooker CSS class. The only other parameter is the name of the javaScript function you wish to fire when the event is triggered. Your function must expect two parameters; firstly the element which triggered the event, and secondly the event itself. This allows you to easily extend functionality of your page without having to write your own JavaScript event binding code.

Example

Keypress

Change

<h4>Keypress</h4>
<script type="text/javascript"><!--
	function HookerTest1(e) {
		alert('You have just pressed a key');
	}
// --></script>
<p><textarea id="hookertest1" class="hooker-keypress func-HookerTest1" cols="20" rows="3"></textarea></p>
<h4>Change</h4>
<script type="text/javascript"><!--
	function HookerTest2(e) {
		alert('You have just changed the selection');
	}
// --></script>
<p><select id="hookertest2" class="hooker-change func-HookerTest2" name="hookertest2"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select></p>

Settings

Valid elements

Any element

Classname

One of the following:

  • hooker-click
  • hooker-keypress
  • hooker-change
  • hooker-mouseover
  • hooker-mouseout
  • hooker-submit
  • hooker-focus
  • hooker-blur

Attributes

None

CSS parameters (what’s this?)

func (required)
The name of the JavaScript function you wish to file when the event is triggered. This function must accept two parameters; firstly the element which triggered the event, and secondly the event itself.