EventX

Reference

Rule Syntax

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.")).

The selector defines which HTML elements are affected (almost any HTML element can be used in a selector).
The onclick handler is one of several event handlers used to trigger program behaviour.
And the behaviour is JavaScript code.

No Grouping

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.

Selectors

CSS1 Selector Support

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" */

Child and Adjacent Sibling Selectors

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" */

No Pseudo-Elements/-Classes

EventX does not support pseudo-classes or pseudo-elements.

Event Handlers

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*
ondblclick   All* (cross-browser support inconsistent)
onfocus      A AREA BUTTON INPUT LABEL SELECT TEXTAREA
onkeydown    All*
onkeypress   All*
onkeyup      All*
onload       BODY (use oninit instead**)
onmousedown  All*
onmousemove  All*
onmouseout   All*
onmouseover  All*
onmouseup    All*
onreset      FORM
onselect     INPUT TEXTAREA
onsubmit     FORM
onunload     BODY (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).

Using `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).

Inline Handler Attributes

Unlike CSS, EventX rules supersede inline attributes. Note: This may change in later versions.

Behaviour

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

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.

Initializing at `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.

Cascade Order

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.

Overriding with `!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 }

About

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.

Browser Support

EventX should work in all current browsers. It has been tested on...

IE6, IE5.5, IE5.01
Mozilla Firefox 1.0.4, Firefox 1.0.3
Opera 8, Opera 7.5
Konqueror
Mac/IE 5.1.7

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:

Action Sheets (Netscape's BECSS submission)
BECSS: Behavioral Extensions to CSS (a defunct W3C working draft from 1999)
Separating behavior and structure by Peter-Paul Koch (an article discussing the separation of behavior and structure)
getElementsBySelector() by Simon Willison (a function that returns a collection of elements matching a given CSS selector—EventX uses its own selector code but looking at Simon's script was educational)
JavaScript Event Sheets by Stuart Langridge (like EventX in spirit, an event attachment script with CSS-like syntax)
Advanced event registration models by Peter-Paul Koch (a discussion of advanced event-attachment methods—EventX currently uses traditional attachment)
XML Path Language (XPath) (describes a method for selecting elements in a node tree)