Mobile Web前端开发系列: 事件处理（一）

转自：http://blog.sina.com.cn/s/blog_6d48e77101016flh.html

在JavaScript交互中，事件起着举足轻重的作用，在Mobile下，事件处理是怎么工作的呢？这篇文章主要讲述一些HTML事件的兼容情况，下一篇会着重讲解触摸事件的事件类型。

添加事件

我们可以通过以下几种方式来添加事件监听，

HTML方式，onclick="alert('simple')" JavaScript对象属性方式， element.onclick = function(){} Dom addEventListener

这几种方式在不同浏览器下的兼容情况，

Browser/platform	HTML attribute	Object property	addEventListener	.
Safari	Yes	Yes	Yes	.
Android browser	Yes	Yes	Yes	.
Symbian/S60	Yes	Yes	Yes	.
Nokia Series 40	Yes	No before 4.6	No before 4.6	.
webOS	Yes	Yes	Yes	.
BlackBerry	Yes	No before 4.6	No	.
NetFront	Yes	Yes	No	.
Internet Explorer	Yes	No	No	.
Motorola Internet Browser	Yes	No	No	.
Opera Mobile	Yes	Yes	Yes	.

load、beforeunload和unload事件

虽然onload事件可以注册在任何一个html元素上，但是，我建议只用在body元素上，因为其他元素的兼容性并没有得到有效的测试。 onunload事件，我也建议只注册在body元素上以来监听用户何时离开页面。在现在浏览器上，onunload事件有时并不是很有效， 很多人会使用onbeforeunload事件来提示用户正在离开页面，但是需要注意的是，onbeforeunload事件并不是一个标准事件，

Browser/platform	body (load)	body (unload)	body (beforeunload)	img (load)	.
Safari	Yes	Yes	No	Yes	.
Android browser	Yes	Yes	Yes	Yes	.
Symbian/S60	Yes	Yes	No	Yes	.
Nokia Series 40	Yes	No	No	No before 6th edition	.
webOS	Yes	Yes	Yes	Yes	.
BlackBerry	Yes	No	No	Yes	.
NetFront	Yes	Yes	No	Yes	.
Internet Explorer	Yes	Yes	No	Yes	.
Motorola Internet Browser	No	No	No	No	.
Opera Mobile	Yes	No	No	Yes	.
Opera Mini	Yes	No	No	No	.

click事件

click事件在大部分高端机器上是可以生效的，但是需要注意的是，它会有300-500ms的延迟，

Browser/platform	a	img	div	li	.
Safari	Yes	Yes	Yes	Yes	.
Android browser	Yes	Yes	Yes	Yes	.
webOS	Yes	Yes	Yes	Yes	.
BlackBerry	Yes	No	No before 4.6	No	.
NetFront	Yes	Yes	Yes	Yes	.
Internet Explorer	No	No	No	Yes	.
Opera Mobile	Yes	Yes	Yes	Yes	.
Opera Mini	Yes	Yes	Yes	Yes	.

focusable和form事件

Browser/platform	onfocus	onblur	onchange	onsubmit	.
Safari	Yes	Yes	Yes	Yes	.
Android browser	Yes	Yes	Yes	Yes	.
Symbian/S60	Yes	Yes	Yes	Yes	.
Nokia Series 40	Yes	No	No	Yes	.
webOS	Yes	Yes	Yes	Yes	.
BlackBerry	Yes	Yes	Yes	Yes	.
NetFront	Yes	Yes	Yes	Yes	.
Internet Explorer	Yes	No	Yes	Yes	.
Motorola Internet Browser	No	No	No	No	.
Opera Mobile	Yes	Yes	Yes	Yes	.
Opera Mini	No	Yes	No	Yes	.

mouseover和mouseout事件

mouseover和mouseout事件一般用来实现hover的效果，在基于touch事件的无线设备上 一般不会起作用，在现在浏览器不建议用over事件来实现hover效果，可以使用css的伪类:hover来实现， 在ios下，我们可以通过把一个元素变成clickable，来支持over事件，如下所示，

<span onmouseover = "..." onmouseout = "..." onclick = "void(0)"></span>

我们通过为元素添加一个onclick = "void(0)"句柄来让浏览器把span元素识别为clickable的元素

scrolling, resizing和rientation事件

当浏览器窗口大小改变的时候，onresize事件会被触发，用户没办法在mobile设备上像在pc上那样自由 的调整窗口大小，但是当用户旋转设备的时候会触发onorientation/onresize事件

Browser/platform	onscroll	onresize	.
Safari	Yes	Yes	.
Android browser	Yes	Yes	.
Symbian/S60	Yes	Yes, also when the toolbar hides	.
Nokia Series 40	No	No	.
webOS	Yes	Yes	.
BlackBerry	No	In some devices	.
NetFront	No	No	.
Internet Explorer	No	No	.
Motorola Internet Browser	No	No	.
Opera Mobile	No	Yes	.
Opera Mini	No	No	.

key事件

key事件主要包括onkeypress, onkeyup,和onkeydown

Browser/platform	key	onkeypress in a text input	.
Safari	No	Yes	.
Android browser	Yes, but it also opens address bar	Yes	.
Symbian/S60	Yes	Yes	.
Nokia Series 40	Yes	No	.
webOS	Yes, but it also opens address bar	Yes	.
BlackBerry	Yes	No	.
NetFront	No	No	.
Internet Explorer	Yes	No	.
Motorola Internet Browser	No	No	.
Motorola Internet Browser	No	No	.
Opera Mobile	No	Yes	.
Opera Mini	No	No