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. TP中二维数组的遍历输出

    例子分析 <volist name="list" id="vo"> <volist name="vo['sub']" id ...

  2. Laravel教程 四：数据库和Eloquent

    Laravel教程 四:数据库和Eloquent 此文章为原创文章,未经同意,禁止转载. Eloquent Database 上一篇写了一些Laravel Blade的基本用法和给视图传递变量的几种方 ...

  3. sencha touch list(列表)、 store(数据源)、model(模型)详解

    //求职 Ext.define('app.model.Staff', { extend: 'Ext.data.Model', config: { fields: [{ name: 'id', type ...

  4. 锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用

    在通过jQuery ajax提交表单的时候,通常用下边的方法获取表单内容. var form = 'add-account-form'; //表单id $('#' + form).submit(fun ...

  5. Nginx Http框架的理解

    Nginx Http框架的理解 HTTP框架是Nginx基础框架的一部分,Nginx的其它底层框架如master-worker进程模型.event模块.mail 模块等. HTTP框架代码主要有2个模 ...

  6. SYN攻击TIME_WAIT防御。

    #! /bin/bash /bin/netstat -anput | grep TIME_WAIT >time_wait.txt /bin/cat time_wait.txt |awk '{pr ...

  7. Java NIO原理和使用

    Java NIO非堵塞应用通常适用用在I/O读写等方面,我们知道,系统运行的性能瓶颈通常在I/O读写,包括对端口和文件的操作上,过去,在打开一个I/O通道后,read()将一直等待在端口一边读取字节内 ...

  8. C语言的一点操作（学习笔记）

    #include <stdio.h> #define LENTEST 100 // 采取逐步删除的方法求的素数 //先假设1-100都是素数,然后剔除2的倍数, //3的倍数,直到剔除所有 ...

  9. Python webpy微信公众号开发之 回复图文消息

    新建图文回复模板reply_pictext.xml: $def with (toUser,fromUser,createTime,title1,description1,picurl1,url1)&l ...

  10. LR监控Windows资源

    1.监控准备: 监控方: 1)安装tcp/ip协议下的netbios 2)用administrator登录 被监控方: 1)被监控的Windows开启两个服务: Remote ProcedureCal ...