HTML5中的DOMContentLoaded 和 touchmove

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_30346033

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量68

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xibei666/p/4519360.html

版权

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>