如何在EventListener中传递this及变量并支持正常移除事件监听

在#btn-1节点上通过addEventListener绑定点击事件处理函数后，后续需要移除该监听。已知将处理函数保存为具名变量是移除事件监听的常规要求，但为了正确传递事件回调里的this上下文，往往需要用外层函数包裹核心逻辑，这层包裹函数要么写成匿名函数，即便命名也容易出现绑定和移除时传入的不是同一引用的问题，最终导致监听移除失败。

const anonFunction = function(dis, str) {
  console.log(dis);
  console.log(str);
}

const myFn = function() {
  anonFunction(this, 'hello world');
}

// 绑定事件时传入的是内联匿名函数，和后续移除时传入的函数不是同一引用
document.querySelector('#btn-1').addEventListener('click', function() {
  anonFunction(this, 'hello world');
});

document.querySelector('#btn-2').addEventListener('click', function() {
  // 这里移除操作不生效
  document.querySelector('#btn-1').removeEventListener('click', anonFunction);
});

<button id="btn-1" type="button">Call Function</button>
<button id="btn-2" type="button">Remove Event Listener</button>

失效核心原因：addEventListener和removeEventListener必须传入完全相同的函数引用才能匹配到对应的监听，上述代码里绑定阶段传的是临时创建的匿名函数，移除阶段传的是anonFunction，二者引用完全不同，自然无法移除。

把负责包裹核心逻辑、处理this传递的外层函数提前赋值给一个固定变量，绑定事件和移除事件时都传入这个变量的引用，就能同时满足this上下文正确传递、监听可正常移除两个需求。

const anonFunction = function(dis, str) {
  console.log(dis);
  console.log(str);
}

// 把包裹逻辑的函数存为固定变量，保证引用一致
const myFn = function() {
  anonFunction(this, 'hello world');
}

// 绑定事件时传入存好的函数引用
document.querySelector('#btn-1').addEventListener('click', myFn);

document.querySelector('#btn-2').addEventListener('click', function() {
  // 移除时传入完全相同的函数引用，即可正常生效
  document.querySelector('#btn-1').removeEventListener('click', myFn);
});

<button id="btn-1" type="button">Call Function</button>
<button id="btn-2" type="button">Remove Event Listener</button>

内容的提问来源于stack exchange，提问作者teduniq