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

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. @suppressWarnings解释

    J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...

  2. MongoDB.WebIDE：升级版的Mongodb管理工具

    很早以前收藏了一片文章:<强大的MongoDB数据库管理工具>.最近刚好要做一些MongoDB方面的工作,于是翻出来温习了一下,用起来也确实挺方便.不过在使用过程中出现了一些个问题,加上更 ...

  3. win7下搭建PHP环境

    一.安装软件 1.apache下载地址:http://httpd.apache.org/download.cgi 2.php下载地址:http://windows.php.net/download/ ...

  4. Windows环境下 Node和NPM个性安装

    常拿自己的电脑常用来测试各种Bug,所以始终奋斗在XP.IE6的环境下.让我们在如此级别的环境下,开始Node之路吧~~ 在过去,Node.js一直不支持在Windows平台下原生编译,需要借助Cyg ...

  5. linux查看python安装路径,版本号

    一.想要查看ubuntu中安装的Python路径 方法一:whereis python 方法二:which python 二.想要查看ubuntu中安装的python版本号 python

  6. 十条nmap常用的扫描命令

    NMap也就是Network Mapper,nmap是在网络安全渗透测试中经常会用到的强大的扫描器,功能之强大,不言而喻.下面介绍一下它的几种扫描命令.具体的还是得靠大家自己学习,因为实在太强大了. ...

  7. Unity3D中定时器的使用

    源地址:http://unity3d.9tech.cn/news/2014/0402/40149.html 在游戏设计过程中定时器是必不可少的工具,我们知道update方法是MonoBehavior中 ...

  8. [ZJOI3527][Zjoi2014]力

    [ZJOI3527][Zjoi2014]力 试题描述 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi.试求Ei. 输入 包含一个整数n,接下来n行每行输入一个数,第i行表示qi. 输出 有n ...

  9. 谷歌浏览器 DEV Tools

    谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用c ...

  10. python-twisted

    环境:win7 64位,python 2.7.3 安装: http://twistedmatrix.com/Releases/Twisted/14.0/Twisted-14.0.0.win-amd64 ...