What DOM events are available to WebKit on Android?

Question

I'm building a mobile web app targeting Android users. I need to know what DOM events are available to me. I have been able to make the following work, but not terribly reliably:

• click
• mouseover
• mousedown
• mouseup
• change

I have not been able to get the following to work:

• keypress
• keydown
• keyup

Does anyone know the full list of what is supported and in what contexts (e.g., is onchange only available to form inputs?)? I can't find a reference for this on The Googles.

Thanks!

Update: I asked the same question on the Android developers list. I will be doing some more testing and will post my results both here and there.

Answer 1

OK, this is interesting. My use case is that I have a series of links (A tags) on a screen in a WebKit view. To test what events area available, using jQuery 1.3.1, I attached every event listed on this page (even ones that don't make sense) to the links then used the up, down, and enter controls on the Android emulator and noted which events fired in which circumstances.

Here is the code I used to attach the events, with results to follow. Note, I'm using "live" event binding because for my application, the A tags are inserted dynamically.

$.each([     'blur',     'change',     'click',     'contextmenu',     'copy',     'cut',     'dblclick',     'error',     'focus',     'keydown',     'keypress',     'keyup',     'mousedown',     'mousemove',     'mouseout',     'mouseover',     'mouseup',     'mousewheel',     'paste',     'reset',     'resize',     'scroll',     'select',     'submit',      // W3C events     'DOMActivate',     'DOMAttrModified',     'DOMCharacterDataModified',     'DOMFocusIn',     'DOMFocusOut',     'DOMMouseScroll',     'DOMNodeInserted',     'DOMNodeRemoved',     'DOMSubtreeModified',     'textInput',      // Microsoft events     'activate',     'beforecopy',     'beforecut',     'beforepaste',     'deactivate',     'focusin',     'focusout',     'hashchange',     'mouseenter',     'mouseleave' ], function () {     $('a').live(this, function (evt) {         alert(evt.type);     }); }); 

Here's how it shook out:

• On first page load with nothing highlighted (no ugly orange selection box around any item), using down button to select the first item, the following events fired (in order): mouseover, mouseenter, mousemove, DOMFocusIn

• With an item selected, moving to the next item using the down button, the following events fired (in order): mouseout, mouseover, mousemove, DOMFocusOut, DOMFocusIn

• With an item selected, clicking the "enter" button, the following events fired (in order): mousemove, mousedown, DOMFocusOut, mouseup, click, DOMActivate

This strikes me as a bunch of random garbage. And, who's that cheeky IE-only event (mouseenter) making a cameo, then taking the rest of the day off? Oh well, at least now I know what events to watch for.

It would be great if others want to take my test code and do a more thorough run through, perhaps using form elements, images, etc.

Answer 2

Since this is the second most popular Android + JavaScript post on SO (which is just a sad commentary on the state of web development targeting the Android platform), I thought it may be worthwhile including a link to pkk's touch event test results at http://www.quirksmode.org/mobile/tableTouch.html and also http://www.quirksmode.org/mobile/ in general.