重读fastclick源码

Posted on   |   In

重读 fastclick 源码

Talk is cheap, show me the code

最近遇到一点fastclick的报错，追踪下去，发现对于fastclick的源码其实并没有很好地理解清楚，找了些资料，决定重新读一遍。

起因

移动端click事件有300ms延迟

300ms延迟的原因： 移动端有一个双击缩放功能，浏览器需要判断用户点击是否为双击缩放

导致的结果：

  • 用户体验差，很不流畅，尤其是在密集操作场景下，比如计算器等操作时，感觉反应很慢
  • 会有点击穿透问题

看个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
  <div style="text-align: center">
    <button class="btn" type="button">开始</button>
    <div id="text"></div>
  </div>
  <script src="./fastclick.js"></script>
  <script type="text/javascript">
    let startTime;
    let btn = document.querySelector('.btn');
    let text = document.querySelector('#text');
    // if ('addEventListener' in document) {
    //   document.addEventListener('DOMContentLoaded', function() {
    //     FastClick.attach(document.body);
    //   }, false);
    // }
    btn.addEventListener('touchstart', function(e) {
      startTime = new Date().getTime();
      text.innerHTML = null;
    });
    btn.addEventListener('touchend', function(e) {
      var t  = document.createElement('p');
      t.innerText = 'touch end :'+(new Date().getTime() - startTime)+'ms';
      text.appendChild(t)
    });
    btn.addEventListener('click', function(e) {
      var t  = document.createElement('p');
      t.innerText = 'click :'+(new Date().getTime() - startTime)+'ms';
      text.appendChild(t)
    });
  </script>
</body>

可以看到按钮点击后，输出 touch end 88ms click 301ms

每次点击结果可能不同，但是不影响结论，就是click会延迟300ms执行

移动端Event事件顺序

  • touchstart
  • touchmove
  • touchend
  • mouseover — 当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发
  • mouseenter — 当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发
  • mousedown
  • click

然而click存在300ms延迟，touch却是没有的

fastclick解析

思路

利用touch模拟tap点击，如果认为是一次有效的tap，则在touchend时立即模拟一个click事件，分发到事件源（相当于主动触发一次click），同时阻止掉浏览器300ms后产生的click。

源码

  • 先看下结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* Instantiate fast-clicking listeners on the specified layer.
*
* @constructor
* @param {Element} layer The layer to listen on
* @param {Object} [options={}] The options to override the defaults
*/
// 构造函数
function FastClick(layer, options) {...}
/**
* Windows Phone 8.1 fakes user agent string to look like Android and iPhone.
*
* @type boolean
*/
// windows phone
var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
/**
* Android requires exceptions.
*
* @type boolean
*/
var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0 && !deviceIsWindowsPhone;
/**
* iOS requires exceptions.
*
* @type boolean
*/
var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
/**
* iOS 4 requires an exception for select elements.
*
* @type boolean
*/
var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);
/**
* iOS 6.0-7.* requires the target element to be manually derived
*
* @type boolean
*/
var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS [6-7]_\d/).test(navigator.userAgent);
/**
* BlackBerry requires exceptions.
*
* @type boolean
*/
var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0;
// 判断是否需要浏览器原生的click事件（针对一些特殊元素比如表单）
FastClick.prototype.needsClick = function(target) {...}
// 发送模拟的click事件
FastClick.prototype.sendClick = function(targetElement, event) {...}
// touchstart eventhandler
FastClick.prototype.onTouchStart = function(event) {...}
// touchmove eventhandler
FastClick.prototype.onTouchMove = function(event) {...}
// touchend eventhandler
FastClick.prototype.onTouchEnd = function(event) {...}
// 判断这次tap是否有效
FastClick.prototype.onMouse = function(event) {...}
// click handler 捕获阶段监听
FastClick.prototype.onClick = function(event) {...}
// 销毁fastlick，移除事件绑定
FastClick.prototype.destroy = function() {...}
// 绑定
FastClick.attach = function(layer, options) {
  return new FastClick(layer, options);
};
// fastclick在各种AMD、普通模式等的定义方式
if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
  // AMD. Register as an anonymous module.
  define(function() {
    return FastClick;
  });
} else if (typeof module !== 'undefined' && module.exports) {
  module.exports = FastClick.attach;
  module.exports.FastClick = FastClick;
} else {
  window.FastClick = FastClick;
}
  • fastclick的使用：
1
2
3
4
5
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

可见attach方法其实就是执行了fastclick的构造函数初始化

  • 初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// Constructor 构造函数
function FastClick(layer, options) {
  var oldOnClick;
  options = options || {};
  /**
    * Whether a click is currently being tracked.
    *
    * @type boolean
    */
  this.trackingClick = false;
  /**
    * Timestamp for when click tracking started.
    *
    * @type number
    */
  this.trackingClickStart = 0;
  /**
    * The element being tracked for a click.
    *
    * @type EventTarget
    */
  this.targetElement = null;
  /**
    * X-coordinate of touch start event.
    *
    * @type number
    */
  this.touchStartX = 0;
  /**
    * Y-coordinate of touch start event.
    *
    * @type number
    */
  this.touchStartY = 0;
  /**
    * ID of the last touch, retrieved from Touch.identifier.
    *
    * @type number
    */
  this.lastTouchIdentifier = 0;
  /**
    * Touchmove boundary, beyond which a click will be cancelled.
    *
    * @type number
    */
  this.touchBoundary = options.touchBoundary || 10;
  /**
    * The FastClick layer.
    *
    * @type Element
    */
  this.layer = layer;
  /**
    * The minimum time between tap(touchstart and touchend) events
    *
    * @type number
    */
  this.tapDelay = options.tapDelay || 200;
  /**
    * The maximum time for a tap
    *
    * @type number
    */
  this.tapTimeout = options.tapTimeout || 700;
  if (FastClick.notNeeded(layer)) {
    return;
  }
  
  // Some old versions of Android don't have Function.prototype.bind
  // 兼容bind
  function bind(method, context) {
    return function() { return method.apply(context, arguments); };
  }
  var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
  var context = this;
  // 方法绑定到fastclick实例
  for (var i = 0, l = methods.length; i < l; i++) {
    context[methods[i]] = bind(context[methods[i]], context);
  }
  // Set up event handlers as required
  // 为当前fastclick对象绑定的layer加监听
  if (deviceIsAndroid) {
    layer.addEventListener('mouseover', this.onMouse, true); //true 捕获阶段触发 
    layer.addEventListener('mousedown', this.onMouse, true);
    layer.addEventListener('mouseup', this.onMouse, true);
  }
  
  layer.addEventListener('click', this.onClick, true);
  layer.addEventListener('touchstart', this.onTouchStart, false);
  layer.addEventListener('touchmove', this.onTouchMove, false);
  layer.addEventListener('touchend', this.onTouchEnd, false);
  layer.addEventListener('touchcancel', this.onTouchCancel, false);
  // Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
  // which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick
  // layer when they are cancelled.
  if (!Event.prototype.stopImmediatePropagation) {
    layer.removeEventListener = function(type, callback, capture) {
      var rmv = Node.prototype.removeEventListener;
      if (type === 'click') {
        rmv.call(layer, type, callback.hijacked || callback, capture);
      } else {
        rmv.call(layer, type, callback, capture);
      }
    };
    layer.addEventListener = function(type, callback, capture) {
      var adv = Node.prototype.addEventListener;
      if (type === 'click') {
        adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
          if (!event.propagationStopped) {
            callback(event);
          }
        }), capture);
      } else {
        adv.call(layer, type, callback, capture);
      }
    };
  }
  // If a handler is already declared in the element's onclick attribute, it will be fired before
  // FastClick's onClick handler. Fix this by pulling out the user-defined handler function and
  // adding it as listener.
  if (typeof layer.onclick === 'function') {
    // Android browser on at least 3.2 requires a new reference to the function in layer.onclick
    // - the old one won't work if passed to addEventListener directly.
    oldOnClick = layer.onclick;
    layer.addEventListener('click', function(event) {
      oldOnClick(event);
    }, false);
    layer.onclick = null;
  }
}
  • 接下来是关键步骤
    • touchstart，touchend是如何判断tap是否有效
    • 模拟click事件
    • 阻止300ms后的click

onTouchStart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/**
  * On touch start, record the position and scroll offset.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// touchstart eventhandler
FastClick.prototype.onTouchStart = function(event) {
  var targetElement, touch, selection;
  // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
  // 若多点触控则不对targetElement初始化，在此提前终止避免误模拟产生click
  if (event.targetTouches.length > 1) {
    return true;
  }
  
  // 获取发生事件源元素（目标阶段的元素）
  targetElement = this.getTargetElementFromEventTarget(event.target);
  touch = event.targetTouches[0];
  if (deviceIsIOS) {
    // Only trusted events will deselect text on iOS (issue #49)
    selection = window.getSelection();
    if (selection.rangeCount && !selection.isCollapsed) {
      return true;
    }
    if (!deviceIsIOS4) {
      // Weird things happen on iOS when an alert or confirm dialog is opened from a click event callback (issue #23):
      // when the user next taps anywhere else on the page, new touchstart and touchend events are dispatched
      // with the same identifier as the touch event that previously triggered the click that triggered the alert.
      // Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an
      // immediately preceeding touch event (issue #52), so this fix is unavailable on that platform.
      // Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string,
      // which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long,
      // random integers, it's safe to to continue if the identifier is 0 here.
      if (touch.identifier && touch.identifier === this.lastTouchIdentifier) {
        event.preventDefault();
        return false;
      }
      this.lastTouchIdentifier = touch.identifier;
      // If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling: touch) and:
      // 1) the user does a fling scroll on the scrollable layer
      // 2) the user stops the fling scroll with another tap
      // then the event.target of the last 'touchend' event will be the element that was under the user's finger
      // when the fling scroll was started, causing FastClick to send a click event to that layer - unless a check
      // is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42).
      this.updateScrollParent(targetElement);
    }
  }
  // 追踪click标记
  this.trackingClick = true; 
  // 追踪click开始时间
  this.trackingClickStart = event.timeStamp;
  // 事件源元素
  this.targetElement = targetElement;
  // 起始坐标X
  this.touchStartX = touch.pageX;
  // 起始坐标Y
  this.touchStartY = touch.pageY;
  // Prevent phantom clicks on fast double-tap (issue #36)
  if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
    // 阻止之后的click
    event.preventDefault();
  }
  return true;
};

onTouchMove

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
  * Based on a touchmove event object, check whether the touch has moved past a boundary since it started.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// check has touchmoved
FastClick.prototype.touchHasMoved = function(event) {
  var touch = event.changedTouches[0], boundary = this.touchBoundary;
  if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) {
    return true;
  }
  return false;
};
/**
  * Update the last position.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// touchmove handler
FastClick.prototype.onTouchMove = function(event) {
  if (!this.trackingClick) {
    return true;
  }
  // If the touch has moved, cancel the click tracking
  // 如果触摸移动了，也就是进行了swipe等操作，判断越界了，则cancel对于click的追踪，走原生流程
  if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {
    this.trackingClick = false;
    this.targetElement = null;
  }
  return true;
};

onTouchEnd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
  * On touch end, determine whether to send a click event at once.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// touchend handler
FastClick.prototype.onTouchEnd = function(event) {
  var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
  if (!this.trackingClick) {
    return true;
  }
  // Prevent phantom clicks on fast double-tap (issue #36)
  // 阻止快速双击
  if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
    this.cancelNextClick = true;
    return true;
  }
  // 超时取消click，走原生流程，不阻止click
  if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
    return true;
  }
  // Reset to prevent wrong click cancel on input (issue #156).
  this.cancelNextClick = false;
  this.lastClickTime = event.timeStamp; // 标记离开时间
  trackingClickStart = this.trackingClickStart;
  this.trackingClick = false;
  this.trackingClickStart = 0;
  // On some iOS devices, the targetElement supplied with the event is invalid if the layer
  // is performing a transition or scroll, and has to be re-detected manually. Note that
  // for this to function correctly, it must be called *after* the event target is checked!
  // See issue #57; also filed as rdar://13048589 .
  if (deviceIsIOSWithBadTarget) {
    touch = event.changedTouches[0];
    // In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to null
    targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;
    targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;
  }
  targetTagName = targetElement.tagName.toLowerCase();
  if (targetTagName === 'label') {
    forElement = this.findControl(targetElement);
    if (forElement) {
      this.focus(targetElement);
      if (deviceIsAndroid) {
        return false;
      }
      targetElement = forElement;
    }
  } else if (this.needsFocus(targetElement)) {
    // Case 1: If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through.
    // Case 2: Without this exception for input elements tapped when the document is contained in an iframe, then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37).
    if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
      this.targetElement = null;
      return false;
    }
    this.focus(targetElement);
    this.sendClick(targetElement, event);
    // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
    // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others)
    if (!deviceIsIOS || targetTagName !== 'select') {
      this.targetElement = null;
      event.preventDefault();
    }
    return false;
  }
  if (deviceIsIOS && !deviceIsIOS4) {
    // Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled
    // and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42).
    scrollParent = targetElement.fastClickScrollParent;
    if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
      return true;
    }
  }
  // Prevent the actual click from going though - unless the target node is marked as requiring
  // real clicks or if it is in the allowlist in which case only non-programmatic clicks are permitted.
  if (!this.needsClick(targetElement)) {
    event.preventDefault(); // 阻止click
    this.sendClick(targetElement, event); // 发生模拟click事件
  }
  return false;
};

sendClick

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
  * Send a click event to the specified element.
  *
  * @param {EventTarget|Element} targetElement
  * @param {Event} event
  */
// 发出模拟的click事件
FastClick.prototype.sendClick = function(targetElement, event) {
  var clickEvent, touch;
  // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
  if (document.activeElement && document.activeElement !== targetElement) {
    document.activeElement.blur();
  }
  touch = event.changedTouches[0];
  // Synthesise a click event, with an extra attribute so it can be tracked
  clickEvent = document.createEvent('MouseEvents');
  clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
  clickEvent.forwardedTouchEvent = true;
  targetElement.dispatchEvent(clickEvent);
};
// 事件类型
FastClick.prototype.determineEventType = function(targetElement) {
  //Issue #159: Android Chrome Select Box does not open with a synthetic click event
  if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {
    return 'mousedown';
  }
  return 'click';
};

onClick

在layer的click捕获阶段监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
  * Determine mouse events which should be permitted.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// 判断这次鼠标是否有效
FastClick.prototype.onMouse = function(event) {
  // If a target element was never set (because a touch event was never fired) allow the event
  if (!this.targetElement) {
    return true;
  }
  // 标记fastclick模拟产生的event
  if (event.forwardedTouchEvent) {
    return true;
  }
  // Programmatically generated events targeting a specific element should be permitted
  if (!event.cancelable) {
    return true;
  }
  // Derive and check the target element to see whether the mouse event needs to be permitted;
  // unless explicitly enabled, prevent non-touch click events from triggering actions,
  // to prevent ghost/doubleclicks.
  // 是否需要原生的click
  if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
    // Prevent any user-added listeners declared on FastClick element from being fired.
    if (event.stopImmediatePropagation) {
      event.stopImmediatePropagation(); // 阻止当前事件的冒泡行为并且阻止当前事件所在元素上的所有相同类型事件的事件处理函数的继续执行.
    } else {
      // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
      event.propagationStopped = true;
    }
    // Cancel the event
    // 阻止事件捕获和冒泡
    event.stopPropagation();
    event.preventDefault();
    return false;
  }
  // If the mouse event is permitted, return true for the action to go through.
  return true;
};
/**
  * On actual clicks, determine whether this is a touch-generated click, a click action occurring
  * naturally after a delay after a touch (which needs to be cancelled to avoid duplication), or
  * an actual click which should be permitted.
  *
  * @param {Event} event
  * @returns {boolean}
  */
// click handler 捕获阶段监听
FastClick.prototype.onClick = function(event) {
  var permitted;
  // It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.
  // 1 越界会置为false
  // 2 成功模拟了一次完成tap并阻止click也会置为false
  // 3 避免三方库影响
  if (this.trackingClick) {
    this.targetElement = null;
    this.trackingClick = false;
    return true;
  }
  // Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target.
  if (event.target.type === 'submit' && event.detail === 0) {
    return true;
  }
  permitted = this.onMouse(event);
  // Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through.
  if (!permitted) {
    this.targetElement = null;
  }
  // If clicks are permitted, return true for the action to go through.
  return permitted;
};

总结

以上就是fastclick的源码解析

preventDefault/stopPropagation/stopImmediatePropagation

这里面涉及到这么几个阻止冒泡的方法，有什么区别呢。

MDN Summaries:

  • Event.preventDefault()

Cancels the event if it is cancelable, without stopping further propagation of the event.

如果当前event.cancelable属性为true，则取消的当前事件的默认动作，但不阻止当前事件的进一步传播

The preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

  • Event.stopPropagation()

阻止当前冒泡或捕获阶段的进一步传播

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

  • Event.stopImmediatePropagation()

阻止调用相同事件的其他监听器

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.

If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. If stopImmediatePropagation() is invoked during one such call, no remaining listeners will be called.

参考

createEvent

MDN Summary：

Creates an event of the type specified. The returned object should be first initialized and can then be passed to EventTarget.dispatchEvent.

创建一种类型的事件，返回一个对象，同时这个对象可以被传入dispatchEvent中进行分发。

type is a string that represents the type of event to be created. Possible event types include “UIEvents”, “MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section for details.

一共有四种模拟事件类型

  • UIEvents
  • MouseEvents
  • MutationEvents
  • HTMLEvents
1
2
3
4
5
6
7
8
9
10
11
12
13
// Create the event. 创建事件
var event = document.createEvent('Event');
// Define that the event name is 'build'. 事件名称build
event.initEvent('build', true, true);
// Listen for the event. 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);
// Target can be any Element or other EventTarget. 分发事件
elem.dispatchEvent(event);