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. 初学JDBC，防SQL注入简单示例

    在JDBC简单封装的基础上实现 public class UserDao{ public static void testGetUser(String userName) throws Excepti ...

  2. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  3. Spark Graphx In Action

    两个重要的技术:Spark和graphs 本章节内容 为什么Spark是最先进的大数据处理系统 是什么让图可以以一种独特的方式来模拟关联数据 GraphX为什么会成规领先的图分析平台

  4. 新浪微博客户端(20)-集成MJRefresh

    HomeViewController.m /** 集成下拉刷新控件 */ - (void)setupPullToRefreshView { __unsafe_unretained UITableVie ...

  5. [bug]The file ‘/xxx/xxx.aspx’ has not been pre-compiled, and cannot be requested

    今天莫名奇妙的出现了这个问题,查找很多资料最后解决了. 发现编译的时候,少了一个dll,导致预编译失败. 参考资料 https://blogs.msdn.microsoft.com/asiatech/ ...

  6. [Effective JavaScript 笔记] 第12条：理解变量声明提升

    js支持词法作用域,即除了极少的例外,对变量的引用会被绑定到声明变量最近的作用域中. js不支持块级作用域,即变量定义的作用域并不是离其最近的封闭语句或代码块,而是包含它们的函数. 不了解这个会产生一 ...

  7. xcode SVN

    Mac上SVN的管理工具: CornerStone http://blog.csdn.net/wohaoxuexi/article/details/8444184 步骤: 1. import 项目到s ...

  8. 配置oss bucket cors

    到bucket中属性中选择跨越设置,点击添加规则会看到以下界面: 对应的输入如上即可.

  9. FZU 1649 Prime number or not米勒拉宾大素数判定方法。

    C - Prime number or not Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  10. linux zookeeper 原理详解

    http://cailin.iteye.com/blog/2014486  直接打开此链接即可 --------------------------------------------------   ...