EventX

Navigation

IMPORTANT:
EventX has reached end-of-life.

Please use a modern library like jQuery.

EventX was created in 2005, before good solutions (like jQuery) existed. These pages are available for historical and reference use only. Don't use EventX for new projects.

Principles

Note: The code examples on this page are designed to illustrate EventX concepts as simply as possible—they are not necessarily for actual use. Please refer to the example page for more robust solutions.

Adding EventX to Your Web Pages

To use EventX on your web pages, you need to include the eventx.js file via the SCRIPT element in the HEAD of each page. 

<head>
    <title>My Page</title>
    <script src="eventx.js" type="text/javascript"></script>
</head>

Declaring Rules

To add rules, you edit the eventx.js file. Rules are declared in an "array literal" called ruleSets. 

var ruleSets=[

'TR { onmouseover: this.className="highlight" }',
'TR { onmouseout: this.className="" }'

];

To add a rule, you simply add it to the list... 

var ruleSets=[

'TR { onmouseover: this.className="highlight" }',
'TR { onmouseout: this.className="" }',
'A { onclick: alert("You clicked on a link.") }'

];

Array literal syntax

Please note that rules are written in quotes and separated by commas (no comma is used after the last rule). 

var ruleSets=[

'TR { onmouseover: this.className="highlight" }',
'TR { onmouseout: this.className="" }',
'A { onclick: alert("You clicked on a link.") }'

];

No CSS-like Grouping

EventX does not allow grouping. If you're familiar with CSS, you'll be tempted to group your selectors and declarations but this violates the script's current framework.

This grouping example is illegal:

TR {
    onmouseover: doOneThing();
    onmouseout: doAnotherThing()
}

EventX requires two separate rules:

TR { onmouseover: doOneThing() }
TR { onmouseout: doAnotherThing() }

EventX is similar in spirit to Stuart Langridge's "JavaScript Event Sheets" (JSES). EventX has wider browser-support and implements cascade ordering but JSES allows for CSS-like, multi-line grouping. JSES is listed as #5 under Related Material.

JavaScript's this keyword

To make good use of EventX, you'll need to be familiar with JavaScript's this keyword. In EventX statements, this refers to a selector's target. Using it, you can access any of an object's supported properties or methods.

Below, we see the HTML code for a simple heading: 

<h4>A Heading</h4>

The following rule targets a document's H4 tags and the behaviour accesses the color property: 

H4 { onclick: this.style.color = "blue" }

Now try it by clicking on the heading below:

A Heading

In the example above, we assigned a value. But we can, of course, do anything within the scope of JavaScript.

Separating Behaviour

EventX can help separate behaviour from structure and presentation. In the previous example, we directly altered the element's style with an EventX rule. This was fine for our example, but doing so muddles a useful bit separation we can achieve.

Using the same HTML as before, we can separate behaviour from presentation by manipulating the element's class name with the following EventX rule: 

H4 { onclick: this.className = "selected" }

This gives our Cascading Style Sheet appropriate control of the page presentation. The following style sheet rule now defines the style: 

.selected { color: blue }

Try it by clicking on the heading below:

A Heading

The user interaction is no different, but long-term site maintenance for the designer becomes easier.

Dynamic Pseudo-Classes

To keep things clean, EventX rules can easily replace CSS' dynamic pseudo-classes (:hover, etc.) with true classes (using onmouseover, onmouseout, etc.). Dynamic pseudo-classes work fine but should be replaced if they start to cause confusion with your EventX rules.

Custom Functions

If a behaviour needs more than one or two statements, you should write your own function. Writing complex behaviours directly into a rule is not worth the trouble. A custom function is easier to work with and more efficient.

Now with the same HTML as before, we write an EventX rule that calls a custom function: 

var ruleSets=[

'H4 { onclick: customFunction(this) }',
'A { onmouseover: this.className += " hover" }',
'A { onmouseout: this.className = this.className.replace(/[ ]?\\bhover\\b/, "") }'

];

We add our custom function to the eventx.js file (below the ruleSets list): 

/******************************************************************************
 * ADD CUSTOM FUNCTIONS BELOW OR TO SEPARATE JS FILE (FOR USE IN ABOVE RULES)
 *****************************************************************************/
function customFunction(node) {
    if (node.className == "selected") {
        node.className = "";
    } else {
        node.className = "selected";
    }
}

Clicking once on the following example assigns our class name; clicking a second time removes it:

A Heading

DOM Manipulation

Learning how to reference and manipulate the Document Object Model (W3C DOM) will help you write more expressive rules and associated functions. The DOM provides an interface for dynamically accessing and updating web page content and style. JavaScript's DOM support includes...

I highly recommend taking a look at Mark Wilton-Jones' W3C DOM Tutorial as well as Peter-Paul Koch's W3C DOM Introduction and browser compatibility tables.