GWT provides wrappers for all standard DOM-events and a unified interface for handling them. This article aims to provide a full listing of all relevant classes and points of interest for solving problems related to the DOM event cycle.
...
The link to the browser is realized in the DOMImplStandard.sinkEventsImpl(Element, int) method. In this native method, DOM EventListeners are added to the DOM elements representing GWT Widgets. This method is ultimately executed when the addDomHandler() method is called. It effectively overrides all eventlisteners set by the browser with a method triggering the GWT event-cycle, so calling event.preventDefault() and event.stopPropagation() on a DomEvent are sure to have the desired effect.
Adding EventListeners in JavaScript
As stated above, GWT does this for all standard DOM-events by default. To capture events not handled by GWT (for example touch-events), it may be necessary to do this manually, using native JavaScript.
There are two (and a half) ways to add an event-listener to a DOM element (in plain HTML/Javascript surroundings), to slightly different effects. The "default" approach is to use the addEventListener method of the DOM elements:
| Code Block |
|---|
addEventListener(in DOMString type,
in EventListener listener,
in boolean useCapture);
|
Where "type" is the event-parameter (e.g. "mouseover"); "listener" can be an anonymous function which takes an event as parameter. The "useCapture" parameter specifies whether the function should be called in the capture-/trigger-phase (if true) or in the bubbling-phase (if false).
This will add the eventlistener to the element, so previous listeners will stay intact.
However, if you want to replace all other listeners, you can set the listener directly by assigning a javascript function directly to the appropriate attribute, which is the name of the event in question (not the type!). For example, the following code would listen for mouseover events:
| Code Block |
|---|
element.onmouseover = function (e) {
// handle event e...
// for example, stop the event's propagation
e.stopPropagation();
};
|
Note that this approach will always register then listener for the bubbling phase, not the capture phase. This is equivalent to setting the HTML-tag's attribute. Also, any listeners you added using addEventListener() for a DOM event before setting the listener like this will be lost.
See the DOM Level 3 specification on the EventTarget interface for details on the behaviour of an event-listener function (http://www.w3.org/TR/DOM-Level-3-Events/#interface-EventTarget).
Debugging in the Browser
...