HTML移动端事件初略
事件流机制
前端领域一直都存在各路英雄逐鹿中原的现象，导致标准繁多，给开发人员带来不少困。但也因为这些不同思想之间的竞争，才早就了前端领域里一些有趣的机制和现象。比如事件流机制。
事件流描述的就是从页面中接收事件的顺序。而IE和Netscape提出了完全相反的事件流概念。IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。
图1-前端事件机制
HTML的移动端事件分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收了事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
案例分析
在前端页面中，视图由DOM树决定，DOM树的构成如下：
图2-前端DOM树
来看一个具体的case，outter是最外层容器，v1和v2都是outter的子节点，V3是V2的子节点。然后我们给每个节点给加上事件监听（捕获阶段和冒泡阶段都加上）。
图3-case分析
DOM结构如下：
<html>
<body>
<div class="outter">
<div class="frame"></div>
<div class="img">
<div class="button"></div>
</div>
</div>
</body>
</html>
给每一个DOM节点添加点击监听事件。
window.onload = function (e) {
document.querySelector('.frame').addEventListener('click', function (event) {
alert('v1');
}, false);
document.querySelector('.frame').addEventListener('click', function (event) {
alert('v1 la');
}, true);
document.querySelector('.img').addEventListener('click', function (event) {
alert('v2');
}, false);
document.querySelector('.img').addEventListener('click', function (event) {
alert('v2 la');
}, true);
document.querySelector('.button').addEventListener('click', function (event) {
alert('v3');
}, false);
document.querySelector('.button').addEventListener('click', function (event) {
alert('v3 la');
}, true);
}
点击按钮超出部分时，会依次弹框'v2 la'、'v3'、'v3 la'、'v2'。
值得关注的是，事件监听触发回调函数时，MouthEvent是对应的事件对象，移动端Touch时就是TouchEvent对象。
待补充
触摸事件
触摸事件是移动端特有的事件类型。
类型详解
touchstart：当手指放在屏幕上触发;
touchmove：当手指在屏幕上滑动时，连续地触发;
touchend：当手指从屏幕上离开时触发;
touchcancel： 当系统停止跟踪时触发; 该事件暂时使用不到;
touch事件兼容性
图4-touch事件兼容性
除了IE之外，其他主流浏览器都已经兼容touch事件。
小程序
小程序最近越来越火，生态越来越丰富和开放。小程序本身提供了比H5更丰富的事件类型，开发同学们可以用这些事件开发出更接近APP用户体验的应用。
小程序与浏览器环境对比
| 提供事件 | 小程序 | 浏览器 |
|---|---|---|
| click | ❌ | ✅ |
| touchStart | ✅ | ✅ |
| touchMove | ✅ | ✅ |
| touchEnd | ✅ | ✅ |
| touchCancel | ✅ | ✅ |
| multipointStart | ✅ | ❌ |
| multipointEnd | ✅ | ❌ |
| tap | ✅ | 非原生 |
| doubleTap | ✅ | 非原生 |
| longTap | ✅ | 非原生 |
| singleTap | ✅ | 非原生 |
| rotate | ✅ | ❌ |
| pinch | ✅ | ❌ |
| pressMove | ✅ | ❌ |
| swipe | ✅ | 非原生 |
网友评论