Suppose you want to write some javascript to simulate an event taking place. For many of the common events, there is the equivalent method, so you can call click() on an element to simulate a mouse click. After a painful debugging session today I found that doing this in Firefox means that the wrong element ends up on the event.target property, which can cause various problems when you’re handling the event.
In this case I had an input element that was kicking off an ansychronous form submit when clicked. On top of this I’m implementing drag and drop behaviour, so I figured it would be as simple as simulating the click event when the item was dragged and dropped in the right way. The click handler already worked, and kicked off the async operation as desired, so it should be a nice layer on top.
The async operation basically hijacks the form submit if it is caused by certain elements, and performs an async post instead. The problem with the event target in Firefox meant that this behaviour never kicked in.
A workaround was to use dispatchEvent instead. This allows a simulated click which results in the correct event target set. This is in the W3C DOM level 2 spec, and is implemented in Firefox (but not IE).