好，如今人人都要用手机，少不了要看看屏幕咯。HTML5这儿就给你搞定了，它有许多触摸事件，比如 touchstart、touchmove、touchend 和 touchcancel 等等。它们都是从 iOS 的 Safari 里跑出来的，后来安卓浏览器也搞起了。这下子我们开发人员能更精确把握手机上的操作了，为大家设计出更舒适、便利的交互体验！
现在，手机啊平板啊都火爆起来，传统的鼠标键盘输入方式就显得没那么炫酷了。还记得苹果的第三代手机iPhone 3Gs？那年头它的浏览器Safari就可以用上这个全新的触碰式交互功能对于那些想要在手机上开发网页的人们而言真是太棒了！不光如此，随着触屏技术的广泛应用，触碰事件也变得尤为重要！
触摸事件详解
-触摸即发：轻轻一碰，无论你是在原本光滑的屏幕上一滑，还是轻轻地点下，都能启动这个炫酷功能。而且，这种互动方式还能在关键时刻为您带来便利，比如，我们能抓取滑动、点击这样的细节操作。
-它（指touchmove）是当你用手在手机上滑动时不停触发的事件。只要你监控到这类事情，就能立刻知道你手所在的位置，进而实现一些滑动或拖拽的功能。
你手指一离屏，” toucheend “就会告诉大家：你马上要结束操作。它就像个提醒器，通知一声给开发人员：这儿需要赶紧处理一下，看看是不是真没按错什么键。为了确保我们的用户安全，负责的开发人员都是很累人呀（泪奔）～
-触屏断连：当你感觉到手机突然不认得你的触摸了，那就是触控取消事件发生。虽然触发时间有时候挺懵的，但在某些紧急情况下还真能派上用场！
这讲座会跟大家说触摸事件的用处是什么以及它们到底是个什么东东。听完后，你们就能更好地理解HTML5如何在手机上搞互动了~知道它都适合用在哪儿？
Touch对象属性
每个人工智能助手都是个万事通，有着各种各样的属性，比如咱们常看到的clientX呀、clientY啊、pageX啦、pageY啊、screenX和screenY等。这些属性就好像是精确定时器，能准确告诉咱们你在哪个地方点击过什么。因此，如果想要做出好App的话，了解并利用好这些属性可是非常关键滴
首先要了解的真相是，触摸其实也有特殊的本事哦——可以感受到你多少个手指同时在活动。那么让我来简单说说那三个关键的东西吧：touches，这就是你现在到底按了哪个地方；targetTouches，就是你点击的目标；最后一个叫changeTouches，这次的重点在于告诉你，之前到现在都有谁的手指在动过。如果把这些属性用好了，多指控制对你来说简直易如反掌，而且还能为你的手机互动增添更多乐趣！
DOM加载事件演进
Html 5给我们带来的惊喜可不止是各种新手友好的触摸操作，更有份大礼——改进了文档对象模型（DOM）加载事件！你可能听说过load事件？以前人们习惯在网页加载完毕后通过这个来看 event，但是这种做法效率太低，因为需要等到所有内容全部加载出来。
为了搞定这事，科技人员发明了个神奇的玩意儿——DOMReady。这货会在网页彻底加载完成，但所有内容尚未呈现的那段时间大声嚷嚷着“我来了！”。现在，DOMReady已经变成很多JavaScript库里面的小明星了。然后它还升级为DOMContentLoaded，这个新版在浏览器里也红红火火起来。而现在，由于HTML5的规范化，DOMContentLoaded终于有了正式的称号，能够在网页完成加载后直接提醒你。
哎呦，你瞅瞅看，这个DOM加载咋就能让咱们这些搞前端的生活变得这么牛掰？原来是因为HTML5给咱们带来了一大堆好处，不仅提高了工作效率，而且还能让网页加载速度更快、效果更好。
总结与展望
var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
}
}, false);
所以说，HTML5新增的这些东西都是给手机浏览器定制的，让咱们在小屏幕上也好施展身手，而且加载速度也更快。虽说有几个特性因兼容问题暂未实现，但常用的触屏事件还是很给力滴，放宽心！
科技进步快得让人眼花缭乱，浏览器也越来越给力，HTML5的神通可施展空间就更大！说不定我们还能看到更多超赞又实用的网页应用！等哪家浏览器把HTML5推得风生水起，再加上开发工具做足了功夫，那咱们真要大饱眼福
document.addeventListener('DOMContentLoaded',function(){...},false);
。
评论0