Html5的出现确实解决了一部分页面交互的问题，同时它的一些特性还是没能被我们掌握，今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用；

DomcontenLoaded：

这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;

  1. document.addeventListener('DOMContentLoaded',function(){...},false);//document.addEventListener('DOMContentLoaded', loaded, false);

touchmove：

这个事件主要是手机拉动屏幕的时候触发的，事件监听：document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);事件分为touchstart、touchmove、touchend；下面举例说明一些，这个例子是借鉴网友博客代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  5.     <title>HTML5测试</title>
  6.     <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function() {
  9.             var startX, startY, endX, endY;
  10.             var showADID = 1;
  11.             document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);
  12.             document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);
  13.             document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);
  14.             function touchStart(event) {
  15.                 var touch = event.touches[0];
  16.                 startY = touch.pageY;
  17.                 startX = touch.pageX;
  18.             }
  19.             function touchMove(event) {
  20.                 var touch = event.touches[0];
  21.                 //endY = (startY - touch.pageY);
  22.                 endX = touch.pageX;
  23.             }
  24.             function touchEnd(event) {
  25.                 $("#img0" + showADID).hide();
  26.                 showADID++;
  27.                 if (showADID > 4) {
  28.                     showADID = 1;
  29.                 }
  30.                 if ((startX - endX) > 100) {
  31.                     $("#img0" + showADID).show();
  32.                 }
  33.                 $("#spText").html("X轴移动大小：" + (startX - endX));
  34.             }
  35.         })
  36.     </script>
  37. </head>
  38. <body >
  39.     <form id="form1">
  40.     <div style="border:solid 1px Red;" id="divADBox">
  41.     <span id="spText">X轴移动大小：0</span>
  42.         <img id="img01" src="/Content/Images/1.gif"  />
  43.         <img id="img02" src="/Content/Images/2.gif" style="display:none;" />
  44.         <img id="img03" src="/Content/Images/3.gif" style="display:none;" />
  45.         <img id="img04" src="/Content/Images/4.gif" style="display:none;" />
  46.     </div>
  47.     </form>
  48. </body>
  49. </html>

参考网址：

http://blog.csdn.net/laijieyao/article/details/41698227

http://www.cnblogs.com/sh_yao/archive/2013/09/11/3314921.html

HTML5中的DOMContentLoaded 和 touchmove的更多相关文章

  1. HTML5触摸事件(touchstart、touchmove和touchend) （转）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. HTML5触摸事件(touchstart、touchmove和touchend)

      HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...

  4. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  5. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  6. 学习——HTML5中事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  8. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  9. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

随机推荐

  1. Android 获取本地图片

    MainActivity.java public class RegisterActivity extends AppCompatActivity { private ImageView iv; @O ...

  2. 批处理：echo的用法

    批处理:echo的用法 若要用 echo 命令显示一条命令,可用下述语法:  echo [message] 参数 ON|OFF   指定是否允许命令的回显.若要显示当前的 ECHO 的设置,可使用不带 ...

  3. 禁止掉非法IP登陆服务器

    今天查看线上服务器日志/var/log/secure发现有很多国外的ip尝试登陆服务器,以前一直没太注意这方面,作为系统管理员真是失职啊,虽然服务器已经设置了强密码,但是看到有人想搞你还是很不爽的.一 ...

  4. Linux内核中的fastcall和asmlinkage宏

    代码中看见:#define _fastcall 所以了解下fastcall -------------------------------------------------------------- ...

  5. vssver2.scc 文件是干啥的？

    idcdpi源文件下的tools下有一个文件    vssver2.scc     vssver2.scc是什么文件 首先,先来个名词解释:Microsoft Visual Source Safe是美 ...

  6. Usermod 命令详解 ------工作中修改shell时用 usermod -s /bin/csh home

     Usermod 命令详解 2012-09-11 11:01:36 标签:usermod 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.htt ...

  7. BSGS算法_Baby steps giant steps算法（无扩展）详解

    Baby Steps-Varsity Giant Step-Astronauts(May'n・椎名慶治) 阅读时可以听听这两首歌,加深对这个算法的理解.(Baby steps少女时代翻唱过,这个原唱反 ...

  8. 移动前端调式页面--weinre

    一:远程调式工具---weinre 阅读目录 一:远程调式工具---weinre 二: 安装weinre 三: 访问weinre及在页面上调用 四:多用户 回到顶部 一:远程调式工具---weinre ...

  9. angular问题总结与反思

    因为工作中实际开发需要,才开始接触angular框架.从当初的比葫芦画瓢,被各种问题.概念折磨摧残,到现在有一定的了解认识,觉得有必要将自己的认识进行简单的总结.不到位的地方还望多多包涵. 1.双向数 ...

  10. 【初级为题，大神绕道】The app icon set named "AppIcon" did not have any applicable content 错误#解决方案#

    The app icon set named "AppIcon" did not have any applicable content 错误,怎样解决   按照您的错误提示您应该 ...