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. Android 实现卫星菜单

    步骤:一:自定义ViewGroup 1.自定义属性 a.attr.xml b.在布局文件中使用activity_main.xml c.在自定义控件中进行读取 2.onMeasure 3.onLayou ...

  2. 全程图解 手把手教您开启windows终端服务

    一.什么是远程桌面? 远程桌面是微软公司为了方便网络管理员管理维护服务器而推出的一项服务.从windows 2000 server版本开始引入,网络管理员使用远程桌面连接程序连接到网络任意一台开启了远 ...

  3. ci中如何得到配置的url

    $this->load->helper('url'); 然后,你可以用它查询并返回设置在config.php文件中的site和/或base URL: echo site_url(); ec ...

  4. Effective Java之避免创建不必要的对象

    Effective Java中有很多值得注意的技巧,今天我刚开始看这本书,看到这一章的时候,我发现自己以前并没有理解什么是不必要的对象,所以拿出来跟大家探讨一下,避免以后犯不必要的错误! 首先书中对不 ...

  5. iOS exit(0); 直接退出程序

    exit();

  6. WPF捕捉Windows关机事件

    private const int SC_SCREENSAVE = 0xF140; private const int WM_QUERYENDSESSION = 0x0011; private boo ...

  7. PHP 500 -Invalid command RewriteEngine的解决

    转自:http://blog.csdn.net/wang02011/article/details/8205903 环境:   wampserver-2.1a 系统 :  win8 错误 :  500 ...

  8. Windows程序----初识Windows程序

    先来看一些励志名言来激励一下自己吧!  励志名言:每一发奋发奋的背后,必有加倍的赏赐 1.有无目标是成功者与平庸者的根本差别. 2.成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成. 3.当 ...

  9. [Effective JavaScript 笔记] 第13条：使用立即调用的函数表达式创建局部作用域

    function wrapElements(a){ var res=[],i,n; for(i=0,n=a.length;i<n;i++){ res[i]=function(){return a ...

  10. Encapsulation and Requiring Files

    By encapsulating all the logic for an object, whether it’s a Dog or a User or an IceCreamShop, you a ...