likes
comments
collection
share

谈谈js点击之后发生了什么

作者站长头像
站长
· 阅读数 57

前言

    之所以突然想写这个文章，主要是之前看到一篇有意思的博文，《探究点击事件在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之后发生了什么？

  1. 保存事件 向事件循环队列中添加事件描述对象，主要是(事件类型: 'click', 触发位置: {x:，y:}，...)
  2. 事件循环到触发 根据点击事件描述对象去dom树中找到该dom(不在乎是不是点击的那个，只是当前该位置的dom)
  3. 执行 通过listeners找到该dom对应的回调，并且执行
转载自:https://juejin.cn/post/6844903858737528840
评论
请登录