js常用的事件及其应用

常用的事件梳理

1.PC端常用事件

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

2.移动端常用事件

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

3.touch事件

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

4.gesture事件模型

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

5.touch事件的属性：

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

6.click

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

<script type="text/javascript">
    var box = document.querySelector("#box");
    box.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延迟的问题)
上一篇文章有详细介绍,出门左转即可;