EventX rules mimic the basic syntax of CSS rules (but with handlers & behaviours in place of properties & values):
selector { handler: behaviour }
To assign behaviour to all of a web page's anchor tags, we can write:
A { onclick: alert("You clicked on a link.") }
In the example above, there are three main parts: selector (A), handler (onclick) and behaviour (alert("You clicked on a link.")).
onclick handler is one of several event handlers used to trigger program behaviour.CSS-like grouping is not allowed. Each rule must contain one selector, one handler and one behaviour—no more, no less. To define multiple handlers for the same element, you must use multiple rule sets.
EventX recognizes all selectors conforming to the CSS1 specification. All of the following examples are valid event extension (and style sheet) selectors:
A { .... } /* anchor elements */
.archived { .... } /* all elements with CLASS "archived" */
#x34y { .... } /* element with id "x34y" */
A.external { .... } /* anchor elements with CLASS "external" */
LI EM { .... } /* emphasis elements descended from list item elements */
#x34y P { .... } /* paragraph elements descended from element with ID "x34y" */
DIV#product P SPAN.new A { .... } /* anchor elements descended from SPAN elements
with CLASS "new" descended from P elements
descended from the DIV element with ID
"product" */
EventX also supports child selectors (>) and adjacent sibling selectors (+). These work as described in the CSS 2.1 Specification:
LI > A { .... } /* anchor elements that are direct children of LI elements */
H2 + P { .... } /* P elements immediately following H2 elements */
#x34y LI > A.product { .... } /* anchor elements of "product" class that are
direct children of LI elements descended from
the element with id "x34y" */
H2.detail + P { .... } /* P elements immediately following H2 elements
with CLASS "detail" */
EventX does not support pseudo-classes or pseudo-elements.
EventX will attempt to define any handler you specify. As a designer, it is your responsibility to use recognized handlers and supporting elements in your rule sets. To avoid non-standard events, refer to the following set of recommended handlers (based on the XHTML 1.0 specification):
Handlers Supporting Elements ------------------------------------------------------ onblur A AREA BUTTON INPUT LABEL SELECT TEXTAREA onchange INPUT SELECT TEXTAREA onclick All*ondblclickAll* (cross-browser support inconsistent) onfocus A AREA BUTTON INPUT LABEL SELECT TEXTAREA onkeydown All* onkeypress All* onkeyup All*onloadBODY (use oninit instead**) onmousedown All* onmousemove All* onmouseout All* onmouseover All* onmouseup All* onreset FORM onselect INPUT TEXTAREA onsubmit FORMonunloadBODY (cross-browser support inconsistent) oninit All (special EventX rule trigger) * All except SCRIPT, BR and PARAM. ** EventX can not make use of onload since EventX itself is called by onload. Use oninit instead (see details below).
oninit
EventX provides a special event trigger called oninit. This trigger can be used in place of an event handler. The oninit trigger fires when EventX initializes (at onload) and the associated behaviour is applied to the selected elements (i.e., elements targeted by the selector).
Unlike CSS, EventX rules supersede inline attributes. Note: This may change in later versions.
The behaviour part of an EventX rule is plain-old JavaScript.
Behaviours can be basic JavaScript statements or calls to custom functions:
A.offsite { onclick: window.open(this.href); return false }
P DIV.alert { onmouseover: myCustomFunction() }
As usual, statements must be separated with a semicolon:
A.offsite { onclick: window.open(this.href); return false }
P DIV.alert { onmouseover: myCustomFunction() }
Custom functions can be included in a separate external script, between a page's HEAD tags, or directly in the EventX file itself. In eventx.js (below the ruleSets list), there is a place set aside for custom functions.
onload
EventX runs when the BODY's onload handler fires. If a page-load is stopped early, behaviour will not be applied. The issues surrounding browser onload behaviour are worth understanding.
EventX follows the CSS specification for cascade ordering. Rules are sorted by explicit weight, selector specificity and declaration order. The more specific a rule is, the heavier it is. Heavier rules will take precedence over lighter rules.
!important
EventX allows designers to explicitly increase a rule's weight using the !important setting. A rule that is marked !important will override any rule that is not. The setting can be included at the end of any rule, before the closing curly brace:
A.offsite { onclick: window.open(this.href); return false; !important }
I started writing EventX because I wanted a reusable, CSS-like method for attaching events to objects. Feel free to contact me regarding this script.
EventX should work in all current browsers. It has been tested on...
EventX has not been tested on Mac/Safari. It does work well in Konqueror though (which shares the same KHTML-base as Safari). I don't expect any issues and if anyone can confirm Mac/Safari compatibility, I would greatly appreciate it.
If you are using EventX, please send me a link to your site. I'm interested in seeing how the script is used and may include a link to your site in the list above.
The EventX script is original code but the concept for EventX was shaped (in part) by several articles, documents and scripts: