带有部分功能的 Javascript addEventListener 和 removeEventListener答案

【问题标题】：Javascript addEventListener and removeEventListener with partial function带有部分功能的 Javascript addEventListener 和 removeEventListener
【发布时间】：2016-08-12 00:08:32
【问题描述】：

我想创建 javascript 函数向 div 添加一个事件侦听器，这样当单击 div 时，它会运行一个函数，并确保 div 只能被单击一次。我的函数现在看起来像这样：

function clickOnce(divID,func){
  var args = Array.prototype.slice.call(arguments,2);
  functionToRun=partial(func,args);
  thisDiv=document.getElementById(divID);
  thisDiv.addEventListener("click",function(e){
    e.target.removeEventListener(e.type, arguments.callee);
    functionToRun();
  });
}

我在 jsfiddle 中有一个工作示例：https://jsfiddle.net/qtzLhgr4/1/ 在 JSfiddle 中，当我单击按钮 1 时，它会显示“单击按钮 #2”。

【问题讨论】：

标签： javascript addeventlistener partial-application

【解决方案1】：

你没有声明functionToRun，所以它是隐式全局的。声明它并thisDiv：

var functionToRun=partial(func,args);
var thisDiv=document.getElementById(divID);

然后开始在strict mode 工作，这将防止此类问题以及阻止您使用arguments.callee，这是错误的做事方式：

thisDiv.addEventListener("click", function listener(e) {
    thisDiv.removeEventListener("click", listener);
    functionToRun();
});

（e.target 也不正确；this 会更好。）

【讨论】：

e.target 很好。 this 是最好的解决方案，但也可以使用 e.currentTarget。只要元素包含其他元素，e.target 就会中断。

【解决方案2】：

functionToRun（和thisDiv，但这与问题无关）是全球性的。对clickOnce 的第二次调用会覆盖functionToRun，因此两个事件处理程序执行相同的函数。

始终声明您的变量。另请注意，arguments.callee 已弃用。您可以改用named function expression。

【讨论】：

可以使用let时除外；然后总是使用let ;)（在 IE11 中支持）
@Sampson：更喜欢const =)