8. 触摸事件
当然，在使用iPhone时你可以使用手指代替鼠标，最酷的是支持多点触摸，在iPhone上鼠标事件被触摸事件替代了，包括：
l touchstart
l touchend
l touchmove
l touchcancel
当你发出这些事件时，事件监听器将会接收一个event对象，event对象有些重要的熟悉，如：
l touches – 触摸对象的集合，触摸屏幕的每个手指一个，touch对象有pageX和pageY属性，包含了在页面上触摸的坐标。
l targetTouches – 和touches类似，但它只登记对目标元素的触摸，而不是整个页面。
下面的例子是拖放的一个简单实现，我们在空白页面上放一个方框，然后进行拖动，你需要的做的就是订阅touchmove事件，然后随手指移动更新方框的位置，如：
window.addEventListener('load', function() {
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
Touchmove事件监听器首先取消手指移动的默认行为，event.targetTouches集合包括一列每个手指所在的当前div元素的数据，我们只需要关心一个手指，因此我们使用event.targetTouches[0]，pageX向我们提供了手指的X坐标，根据这个值减去div宽度的一半，以便手指保留在方框中的中间。
在例11(链接：http://www.sitepoint.com/examples/iphone-development-12tips/drag.html)中我们将所有代码集中到一起了。
