移动端事件及事件应用

目录

1.移动端事件基础
2.移动端常用的事件库
3.移动端轮播图css样式和响应
4.移动端轮播图图片延迟加载

1.移动端事件基础

PC端常用事件

事件名	作用
click	当鼠标点击时触发
mouseover	当鼠标指针移动到元素上时触发
mouseout	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发（不支持冒泡）
mouseleave	当鼠标指针移出元素上时触发（不支持冒泡）
mousemove	当鼠标指针移动到元素上时触发
mousedown	当元素上按下鼠标按钮时触发
mouseup	当在元素上释放鼠标按钮时触发
mousewheel	当鼠标滚轮正在被滚动时运行的脚本
keydown	在用户按下按键时触发
keyup	当用户释放按键时触发
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本

移动端常用事件

事件名	作用
click	当点击时触发（单击）
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本
input	代替keyup、keydown
touch事件模型	处理单手指操作
gesture事件模型	处理多手指操作

touch事件模型

事件名	作用
touchstart	手指按到屏幕上
touchmove	手指在屏幕上滑动
touchend	手指离开屏幕
touchcancle	特殊情况下关闭/退出时触发

gesture事件模型

事件名	作用
gesturestart	当鼠标点击时触发
gesturechange	当鼠标点击时触发
gestureend	当鼠标点击时触发

touch事件的属性：

属性名	作用
type	事件类型
target	事件源
preventDefault（returnValue）	阻止默认行为
stopPropagation（cancleBubble）	停止事件的传播
touches[0].clientX	触碰位置的x值
changedTouches	当前的值和离开的值

changedTouches和touches都是手指信息的集合（TouchList），touches获取到值的必备条件是只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取离开的瞬间坐标只能用changedTouches获取

click

在移动端属于单击事件，不是点击事件， 在移动端的项目中经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行。在移动端使用click会存在300ms的延迟，浏览器在第一次点击结束后还需要等待300ms，看是否触发了第二次点击，如果触发了第二次，就不属于click了，没有触发第二次才属于click。

例如：点击方块，旋转一周：
效果图：

使用click：

<script type="text/javascript">
    var oBox = document.querySelector("#box");
    oBox.addEventListener("click", function () {
        this.style.webkitTransform = "rotate(360deg)";
    }, false);
</script>

使用touch：
发生滑动，变成红色；点击旋转：

<script type="text/javascript">
    function on(curEle, type, fn) {
        curEle.addEventListener(type, fn, false);
    }
    var oBox = document.querySelector("#box");
    //使用touch事件模型模拟实现点击事件操作，包含点击和双击
    on(oBox, "touchstart", function (ev) {
        var point = ev.touches[0];
        this["strX"] = point.clientX;
        this["strY"] = point.clientY;
        this["isMove"] = false;
    });
    on(oBox, "touchmove", function (ev) {
        var point = ev.touches[0];
        var newX = point.clientX,
            newY = point.clientY;
        //判断是否发生滑动，需要判断偏移的值是否在30px以内
        if (Math.abs(newX - this["strX"]) > 30 || Math.abs(newY - this["strY"]) > 30) {
            this["isMove"] = true;
        }
    });
    on(oBox, "touchend", function (ev) {
        if (this["isMove"] === false) {
            //点击
            this.style.webkitTransitionDuration = "1s";
            this.style.webkitTransform = "rotate(360deg)";
            var delayTimer = window.setTimeout(function () {
                this.style.webkitTransitionDuration = "0s";
                this.style.webkitTransform = "rotate(0deg)";
            }.bind(this), 1000);
        } else {
            this.style.background = "red";
        }
    });
</script>

使用fastclick插件（解决移动端使用click导致的300ms延迟的问题）：

<script type="text/javascript">
    FastClick.attach(document.body);
    var oBox = document.querySelector("#box");
    oBox.addEventListener("click", function () {
        this.style.webkitTransform = "rotate(360deg)";
        this.style.webkitTransitionDuration = "1s";
        this.style.webkitTransform = "rotate(360deg)";
        var delayTimer = window.setTimeout(function () {
            this.style.webkitTransitionDuration = "0s";
            this.style.webkitTransform = "rotate(0deg)";
        }.bind(this), 1000);
    }, false);
</script>

点击、单击、双击、长按、滑动

单击和双击（300ms）
点击和长按（750ms）
点击和滑动（x或y偏移的距离是否在30px以内，超过30px是滑动）
左右滑动和上下滑动（x轴偏移的距离>y轴偏移的距离=左右滑，相反就是上下滑）
左滑和右滑（偏移的距离>0=右滑，相反左滑）

2.移动端常用的事件库

FastClick.js：解决click事件的300ms的延迟
Touch.js：百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
hammer.js：同上
Zepto.js：被誉为移动端的小型jQuery。
https://github.com/ZhaoJingnian/zepto
jQuery由于是在pc端使用的，所以代码中包含大量的对于IE的兼容处理，而Zepto只应用于移动端开发，所以在jQuery的基础上没有对低版本的IE进行支持。
jQuery提供了很多的选择器类型及DOM的操作方法，但是Zepto中只是实现了部分常用的选择器和方法，例如：jQuery中的动画方法有animate、hide、show、toggle、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle….但是Zepto中只有，所以Zepto的代码大小比jQuery小很多。
Zepto专门为移动端开发而诞生，所以相对于jQuery来说更适合移动端：Zepto的animate动画方法支持了css3动画的操作，Zepto专门的准备了移动端常用的事件操作。
tap：点击、singleTap：点击、doubleTap：双击、longTap：长按、swipe：滑动、swipeUp：上滑、swipeDown：下滑、swipeLeft：左滑、swipeRight：下滑

3.移动端轮播图css样式和响应

4.移动端轮播图图片延迟加载