移动端开发在日常工作中扮演着重要的角色。针对不同的设备，我们需要深入了解它们的交互方式和特点，并掌握相应的技术来实现用户体验。本文将介绍移动端常见的事件类型、触发顺序以及如何应用它们来构建交互功能。
常见事件类型
触摸事件
触摸事件是指用户在屏幕上触摸时触发的事件，包括以下几种：
touchstart：当手指按下屏幕时触发。touchmove：当手指在屏幕上滑动时触发。touchend：当手指从屏幕上离开时触发。touchcancel：当系统取消触摸事件时触发，例如突然来电或者弹出系统提示框。
手势事件
手势事件是指用户进行一系列复杂操作时触发的事件，例如缩放、旋转等。常见的手势事件包括：
tap：当用户轻触屏幕时触发。doubletap：当用户快速双击屏幕时触发。longpress：当用户长按屏幕时触发。pinch：当用户用两个手指在屏幕上缩放时触发。rotate：当用户用两个手指在屏幕上旋转时触发。
其他事件
除了触摸和手势事件外，还有许多其他的事件类型，例如：
click：当用户单击鼠标或者轻触屏幕时触发。focus：当元素获得焦点时触发。blur：当元素失去焦点时触发。change：当表单元素的值发生变化时触发。scroll：当元素滚动时触发。
事件触发顺序
当用户触发移动设备上的事件时，会按照以下顺序触发事件：
touchstarttouchmovetouchendclick
需要注意的是，在移动设备上，浏览器不会立即触发 click 事件，而是要等待一段时间来检测是否存在双击事件。如果在这段时间内没有出现双击事件，则会触发 click 事件。
事件应用示例
以下是一些常见的事件应用示例：
拖拽效果
<div id="box"></div>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}-- -------------------- ---- ------- --- --- - ------------------------------- --- ------- ------- ------ ------ ---------------------------------- --------------- - ------ - ----------------------- ------ - ----------------------- --- --------------------------------- --------------- - ----------------------- ----- - ---------------------- - ------- ----- - ---------------------- - ------- -------------- - ----- - ----- ------------- - ----- - ----- ---
缩放效果
<div id="box"></div>
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ---- --------- --------- ----- ---- ---- ---- ---------- --------------- ------ -
var box = document.getElementById('box');
var startDistance, endDistance, scale;
box.addEventListener('touchstart', function
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1248) ，转载请注明来源
[https://www.javascriptcn.com/post/1248](https://www.javascriptcn.com/post/1248)