前言
之所以突然想写这个文章，主要是之前看到一篇有意思的博文，《探究点击事件在JavaScript事件循环中的表现》，有趣的地方在于JS点击事件加入回调的并不是点击事件的回调方法，而是点击事件本身(点击位置等描述点击的)。
点击不是加入回调而不是加入事件
<body style="height: 2000px">
<button class="a">打开控制台，快速点击三次</button>
<br />
<button class="b" style="height: 1000px;width: 1000px">按钮b</button>
<script>
var btn = document.querySelector(".a");
btn.onclick = function() {
console.log("click a");
setTimeout(function() {
//页面失去响应2s。
var time = new Date().getTime();
while (new Date().getTime() - time < 2000) {}
window.scrollTo(100, 500); //滚动到第二个按钮上。
console.log("timeout");
});
};
var btn1 = document.querySelector(".b");
btn1.onclick = function() {
console.log("click b");
};
</script>
</body>
当我们连续点击button.a两次的时候，结果却是
click a
timeout
click b
明明是点击的button.a，为什么会触发button.b的事件？
可见，点击并没有直接把回调推入事件循环(
对事件循环不了解，可以先去了解一下)的，而是推入了点击事件(推测就是点击位置、事件类型...)，当我们触发点击的时候，js会去点击位置寻找相应的事件，在上面的例子中，我们在点击button.a之后执行了一个setTimeout滚动页面到button.b的位置，之后执行第二次点击的事件，在该位置button.a已经不见了，而是button.b，所以会执行button.b的回调事件。
事件机制
无论通过onclick还是addEventListener实现事件绑定，我怀疑绑定机制是一样的，因为在实际测试中，我发现onclick执行顺序和addEventListener是一样的，也就是什么时候绑定，那么就在第几个执行。
addEventListener和onclick不同，不是直接给dom绑定属性，并且我在dom节点上也没有看到任何相应的对象用于保存事件，可见addEventListener是不同的机制，参考EventEmitter，试着去实现一个addEventListener
// es6的Map可以使用对象作为键值对的键值
var listeners = new Map(); // 保存dom和其对应的事件
function addEventListener(dom, type, callback) {
if(listeners.has(dom)) {
listeners.get(dom)[type].push(callback);
} else {
listeners.set(dom, {
[type]: [callback]
})
}
}
// 点击之后做了什么
// 1. 保存事件(事件类型: 'click', 触发位置)
...
// 2. 事件循环到触发的时候，根据点击
总结
通过上面分析，总结一下
点击一个
dom之后发生了什么？
- 保存事件
向事件循环队列中添加事件对象，主要是(事件类型: 'click', 触发位置: {x:，y:}，...)- 事件循环到触发
根据点击事件对象去dom树中找到该dom(不在乎是不是点击的那个，只是当前该位置的dom)- 执行
通过listeners找到该dom对应的回调，并且执行
