Html5的出现确实解决了一部分页面交互的问题，同时它的一些特性还是没能被我们掌握，今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用；
DomcontenLoaded：
这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
document.addeventListener('DOMContentLoaded',function(){...},false);//document.addEventListener('DOMContentLoaded', loaded, false);
touchmove：
这个事件主要是手机拉动屏幕的时候触发的，事件监听：document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);事件分为touchstart、touchmove、touchend；下面举例说明一些，这个例子是借鉴网友博客代码：
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <title>HTML5测试</title> <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var startX, startY, endX, endY; var showADID = 1; document.getElementById("divADBox").addEventListener("touchstart", touchStart, false); document.getElementById("divADBox").addEventListener("touchmove", touchMove, false); document.getElementById("divADBox").addEventListener("touchend", touchEnd, false); function touchStart(event) { var touch = event.touches[0]; startY = touch.pageY; startX = touch.pageX; } function touchMove(event) { var touch = event.touches[0]; //endY = (startY - touch.pageY); endX = touch.pageX; } function touchEnd(event) { $("#img0" + showADID).hide(); showADID++; if (showADID > 4) { showADID = 1; } if ((startX - endX) > 100) { $("#img0" + showADID).show(); } $("#spText").html("X轴移动大小：" + (startX - endX)); } }) </script> </head> <body > <form id="form1"> <div style="border:solid 1px Red;" id="divADBox"> <span id="spText">X轴移动大小：0</span> <img id="img01" src="/Content/Images/1.gif" /> <img id="img02" src="/Content/Images/2.gif" style="display:none;" /> <img id="img03" src="/Content/Images/3.gif" style="display:none;" /> <img id="img04" src="/Content/Images/4.gif" style="display:none;" /> </div> </form> </body> </html>
参考网址：
http://blog.csdn.net/laijieyao/article/details/41698227
http://www.cnblogs.com/sh_yao/archive/2013/09/11/3314921.html