On Mon, 9 Aug 2004 15:41:57 +0000 (UTC), kj <so***@987jk.com.invalid>
wrote:
How does one trigger an event programmatically? I'm interested in
how to do this in both the "Level 0" event model as well as in the
DOM Level 2 event model.
With a conforming browser, dispatching an event is trivial: it's built
into the event model. It will even result in performing the default action
associated with that event and the target element. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Dispatching events</title>
<script type="text/javascript">
/* Add the event listener */
function init() {
var elm = null;
if(document.getElementById) {
elm = document.getElementById('test');
}
if(elm && elm.addEventListener) {
elm.addEventListener('click', function() {
alert('Level 2 listener activated');
}, false);
}
}
/* Dispatch a click event into the document tree
*
* Note: I would have called this function fireEvent, or
* dispatchEvent, however, this would have resulted in the
* browser-supplied functions (former in IE, latter in DOM-
* compliant browsers) being called. Be sure to avoid that.
*/
function doEventDispatch() {
var evt = null,
elm = null;
if(document.getElementById) {
elm = document.getElementById('test');
}
if(document.createEvent) {
evt = document.createEvent('MouseEvents');
}
if(elm && elm.dispatchEvent && evt && evt.initMouseEvent) {
evt.initMouseEvent(
'click',
true, // Click events bubble
true, // and they can be cancelled
document.defaultView, // Use the default view
1, // Just a single click
0, // Don't bother with co-ordinates
0,
0,
0,
false, // Don't apply any key modifiers
false,
false,
false,
0, // 0 - left, 1 - middle, 2 - right
null); // Click events don't have any targets other than
// the recipient of the click
elm.dispatchEvent(evt);
}
}
</script>
</head>
<body onload="init()">
<div>
<a id="test" href="http://www.google.com/"
onclick="alert('Level 0 listener activated');">Test</a>
</div>
<div style="margin-top: 1em">
<button type="button"
onclick="doEventDispatch()">Dispatch event</button>
</div>
</body>
</html>
As you can see, clicking the link or the button results in exactly the
same response from the browser, though the click event generated from the
link will have co-ordinates set, rather than zeros (0). Be aware that
every parameter must be specified in the init<type>Event methods,
otherwise the event won't be initialised properly and will result in an
exception.
Of course IE will have none of this. Whilst you can dispatch artificial
events into the document tree (using Element.fireEvent), only listeners
will be dispatched. Actions associated with that event will not be
performed.
As for listeners set through HTML attributes or object properties, this
too is limited. The most you can do here is call the listeners on each
element. However, to do this, you'll probably need to have DOM support in
order to get a reference to the target element (unless you can use one of
the standard collections). If you want to allow the event to bubble up
into parent elements, you'll also need to have DOM support (so you can use
Node.parentNode). And, just like with IE, you cannot get the browser to
perform any actions associated with an element.
So, as you can see, only the DOM approach offers real functionality.
Unfortunately, it is only subset of browsers. As such, make sure that you
thoroughly feature test (like I've done above) before deploying code on
the Web.
Hope that helps,
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
