addEventListener 与removeEventListener怎么用

最近项目做一个滚动条随另一个滚动条等比例滚动的东西，监听左边的scroll事件就可以让右边等比例滚动了，然而右边滚动时虽然也在滚动，但是滚动的特别慢；

通过控制条打印scrollTop可以看到开始左边滚动时scrollTop是一个等比增加的过程

r1.png

但是去移动右边的时候发现右边增加的很慢!

r2.png

代码如下：

      const r = document.querySelector('.right')
      // 左右两边监听鼠标进去移除事件
      l.addEventListener('mouseenter', lFn);
      l.addEventListener('mouseleave', lFn);
      r.addEventListener('mouseenter', rFn);
      r.addEventListener('mouseleave', rFn);

      // 事件 要移除
      function lFn() {
        l.addEventListener('scroll', function () {
          r.scrollTop = l.scrollTop * 1.5;
          console.log('l.scrollTop', l.scrollTop)
        });
        r.removeEventListener('scroll', function () {
          l.scrollTop = r.scrollTop / 1.5;
          console.log('r.scrollTop', r.scrollTop)
        });
      }

      function rFn() {
        r.addEventListener('scroll', function () {
          l.scrollTop = r.scrollTop / 1.5;
          console.log('r.scrollTop', r.scrollTop)
        });
        l.removeEventListener('scroll', function () {
          r.scrollTop = l.scrollTop * 1.5;
          console.log('l.scrollTop', l.scrollTop)
        });
      }

通过研究发现是移除事件的时候并没有移除成功，但是看到removeEventListener里面与addEventListener是一样的啊？ 最后通过网上查阅发现了原因，虽然你写的一样，但是对于两个监听事件来说它们指向的内存地址是不一样的，这是两个不同的函数；我们需要提前定义好函数，然后直接作为参数传入进行了；最终代码如下：

      const l = document.querySelector('.left')
      const r = document.querySelector('.right')
      // 左右两边监听鼠标进去移除事件
      l.addEventListener('mouseenter', lFn);
      l.addEventListener('mouseleave', lFn);
      r.addEventListener('mouseenter', rFn);
      r.addEventListener('mouseleave', rFn);
      // 事件 要移除必须是同一个函数 不能用function(){}，要先定义好
      function lFn() {
        l.addEventListener('scroll', lTop);
        r.removeEventListener('scroll', rTop);
      }
      function rFn() {
        r.addEventListener('scroll', rTop);
        l.removeEventListener('scroll', lTop)
      }

      function lTop() {
        r.scrollTop = l.scrollTop * 1.5;
        console.log('l.scrollTop',l.scrollTop)
      }

      function rTop() {
        l.scrollTop = r.scrollTop / 1.5;
        console.log('r.scrollTop',r.scrollTop)
      }

参考：https://www.cnblogs.com/ToNi/archive/2015/04/07/4397669.html