FE事件机制

2018-05-30 本文已影响0人阿追老师Jason

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	✅	非原生