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. RSA算法小记

    学习来源:http://www.cnblogs.com/vamei/p/3480994.html 小记: 一.数学基础: 欧拉Phi函数:Φ(n)=总数(从1到n-1中与n互质的整数) (1)欧拉定理 ...

  2. --hdu 1050 Moving Tables(贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1050 AC code: #include<stdio.h> #include<str ...

  3. BurpSuite实例教程

    很久以前就看到了Burp suite这个工具了,当时感觉好NB,但全英文的用起来很是蛋疼,网上也没找到什么教程,就把这事给忘了.今天准备开始好好学习这个渗透神器,也正好给大家分享下.(注:内容大部分是 ...

  4. mySQL笔记2

    php主要实现B/S .net IIS java TomCat LAMP: Linux 系统 A阿帕奇服务器 Mysql数据库 Php语言(KE) mysql:c常用代码 create table c ...

  5. 小白科普之JavaScript的BOM模型

    一.什么是BOM 1. BOM是browser object model的缩写,简称浏览器对象模型: 2. BOM提供了独立于内容而与浏览器窗口进行交互的对象,描述了与浏览器进行交互的方法和接口: 3 ...

  6. 给定一个值S，在有序数组中找出两个元素A和B，使 A+B = S.

    在网上看到过一个面试题,感觉挺有意思,看别人的代码写的逻辑不够谨慎,重写了一个,较真了又... package com.array7.algorithm; public class Algorithm ...

  7. UIImagePickerController详解

    转载自:http://blog.csdn.net/kingsley_cxz/article/details/9157093 1.UIImagePickerController的静态方法: imagep ...

  8. index and polymorphic

    http://guides.rubyonrails.org/association_basics.html#polymorphic-associations class CreateStars < ...

  9. 查看远程git log

    $ git reset --hard bit/add $ git log --oneline --graph

  10. nginx学习（一）：基本安装

    转载自http://summervast.blog.51cto.com/690507/385511 注意:可能因版本不同,个别指令不起作用,需要注意版本灵活安装,我在安装时也遇到过此问题 开始学习ng ...