[thelist] DOM dispatchEvent

[Mark Kennedy]

Hi list,

I just wrote out a long cry-for-help email to you all, asking how to use the DOM
level 2 dispatchEvent method for synthesizing mouse events on HTML nodes... but
then I figured it out.  It's not particularly obvious, so I thought I'd make a
tip out of it (read this if you're trying to replicate IEs fireEvent() in
Gecko):

<tip type="DOM Level 2 Events" author="Mark Kennedy">

In order to synthesise an event using DOM 2 Events, IGNORE what you might read
somewhere like this

http://www.mozilla.org/docs/dom/domref/dom_el_ref36.html

...because it's complete rubbish.  The method takes an event object as an
argument, not a string as in the example.  Instead, attempt to decypher

http://www.w3.org/TR/DOM-Level-2-Events/events.html

and do something like this:

// target is some DOM node on which you wish to fire an event.
oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent(
  "click",    // the type of mouse event
  true,       // do you want the event to
              // bubble up through the tree?  (sure)
  true,       // can the default action for this
              // event, on this element, be cancelled? (yep)
  window,     // the 'AbstractView' for this event,
              // which I took to mean the thing sourcing
              // the mouse input.  Either way, this is
              // the only value I passed that would work
  1,          // details -- for 'click' type events, this
              // contains the number of clicks. (single click here)
  1,          // screenXArg - I just stuck 1 in cos I
              // really didn't care
  1,          // screenYArg - ditto
  1,          // clientXArg - ditto
  1,          // clientYArg - ditto
  false,      // is ctrl key depressed?
  false,      // is alt key depressed?
  false,      // is shift key depressed?
  false,      // is meta key depressed?
  0,          // which button is involved?
              // I believe that 0 = left, 1 = right,
              // 2 = middle
  target      // the originator of the event
              // if you wanted to simulate a child
              // element firing the event you'd put
              // its handle here, and call this method
              // on the parent catcher.  In this case,
              // they are one and the same.
);
target.dispatchEvent( oEvent );

Things to note: the event type supplied to createEvent ENDS IN AN 'S'.  So if
you wanted to create a UIEvent, you'd supply 'UIEvents'.  This caught me out for
ages.

IE's 'oButton.fireEvent("onclick");' is so much easier :-)

</tip>

Here's another tip, if we're allowed two in one post

<tip type="IE 6 Proprietry DOM">

On Internet Explorer 6, if target is a reference to an anchor element (i.e. <a
href="jizzmajazz.php">click here</a>), then

target.fireEvent( "onclick" );

won't invoke the default onclick action for the link, which is, of course, to
navigate to the page referenced in the href attribute.  If you had defined your
own custom onclick event handler, it would call that, but won't call the
default.

Elements in IE often have methods bearing the name of the various events, such
as 'click()' and 'focus()' *** and in this case, click() will invoke the default
handler for anchors.  So you would need to do something like

eventname = "click"
eval( "target." + eventname + "()" )

OR

<a href="jizzmajazz.php" onclick="this.click()">click me</a>

target.fireEvent( "click" );


*** (metioned in DOM Level 1 spec but ONLY for a few elements and click only
appears for input elements of type 'button', 'radio', etc and not anchors)

</tip>


Regards

Mark