An HTML element, an ID or NAME, or an array of HTML elements, IDs, and/or NAMEs
The event's type. These events are standard DOM events (minus the "on"), like 'click', 'mousedown', 'mouseup', 'keydown', 'blur' etc. Possible values are:
When the user clicks on an element.
When the user double clicks on an element.
When the user presses the mouse down on an element.
When the user releases the mouse button after pressing mouse down on an element.
When the mouse cursor moves over an element.
When the mouse cursor is being moved over an element.
When the mouse cursor leaves an element.
When the user presses a key. Will fire repeatedly while the key is being pressed.
When the user presses a key. Fires on the key down.
When the user presses a key and then releases it.
When the user gives focus to an element.
When a user 'blurs' an element. I.e. when an element looses focus.
When the user makes a change in a form element.
When the user resets the data in a form using a 'Reset' button.
When the user clicks a form's 'Submit' button.
When the user scrolls a scrollable element. This could be the page itself, of a DIV that has scroll bars.
When the user resizes the browser window.
When the page is loaded.
When the page is unloaded (i.e. when you navigate to another page, or the browser is closed).
- eventHandlerfunction(e, scope)
The DOM event object. See The DOM 'Event' Object below.
The scope object (see scope below.)
An object scope to be passed into the function that handles the event. The scope object is passed in as the second parameter to the event handler function (the DOM event object is passed in as the first parameter).This is an advanced parameter.
A true/false value for whether or not you would like the passed in scope to take the place of the HTML element in the "this." namespace.This is an advanced parameter.
A group name for the event. Can be used with $e.removeGroup() function to remove multiple events from multiple objects.Your page might contain elements that have had events bound to them using the $e.add() function. If any of these elements are subsequently removed from the page (through setting innerHTML of a parent element, or through DOM manipulation), it is important to remove the events from these elements, or else a memory leak might occur.
Add one or more event listeners to an HTML element.
The $e.add() function allows you to add an event to a single or multiple HTML elements. You can call the $e.add() function multiple times for a given element and event, allowing you to add multiple event handlers for the same event. For example:
When the 'firstname' element loses focus, the validate2() function will be called first (since it was the most recent event handler to be added), and then the validate1() function will be called next.
The DOM event object can also be used to stop an event from 'bubbling' (i.e. a 'click' event on a button that was contained in a DIV will first cause the button's onclick event to fire, then will cause the DIVs onclick event to fire and the will cause the page's onclick event to fire). You might want to prevent the event from bubbling up to the DIV and the page. You can do this by using the $e.stopEvent() function, passing in the DOM event object to this function.
We want to add a handler for the 'onblur' event for both of these controls. When either of the controls looses focus, we want to call the blurred() function.
Notice that in the definition of the blurred() function, we show a parameter that is passed in (function blurred(e)). The argument is the DOM Event object that is automatically passed in to the event handler. The DOM Event object has information about the event that triggered the function call.
<html> <head> </head> <body> <input id="id_fn" name="firstname"/> <input id="id_ln" name="lastname"/> </body> </html>
This example demonstrates how you can bind multiple event handlers to an event, and shows the order in which the event handlers are executed.
If you load this page in a browser, when focus leaves the 'id_fn' element you will notice the following:
First, a dialog showing 'msg1' is shown, indicating that the event handler defined in the HTML executes first
Next, a dialog showing 'msg3' is shown, indicating that the most recent event handler added using $e.add() is executed next.
Finally, a dialog showing the control ID is shown, indicating that t he events added by $e.add() are executed in a 'last in - first out' order.
Notice that in the definition of the msg2() function we pass in the DOM event object and so the message box can display e.type (the type of the event that caused the event handler to be invoked). Also notice that the 'this' alias is implicitly passed in and can be used to get information about the control (such as it's ID - 'this.id', or current value - 'this.value')