javascript - JavaScript/jQuery：一个 ID，两个函数。如何以最少的代码重复来做到这一点？

Question

我有一个 ID，我想为其分配两个功能。这是它目前的样子：

document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
document.getElementById(this.config.dragArea).addEventListener("drop", this._handleFileDrop, false);

我怎样才能在没有太多重复的情况下重写这个文件？

我试着做

document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, this._handleFileDrop, false);

和

document.getElementById(this.config.dragArea).addEventListener("drop", function(){this._dropFiles; this._handleFileDrop}, false);

一切都无济于事:(允许使用jQuery解决方案

Answer 1

这会更高效：

var dragArea = document.getElementById(this.config.dragArea);
dragArea.addEventListener("drop", function () {
  that._dropFiles();
  that._handleFileDrop();
}, false);

如果您有很多事件侦听器，那么您可以创建某种循环来分配一大堆 this._doX 函数，但是对于这两个侦听器，这可能过于复杂。

使用 jQuery：

var dragArea = $(this.config.dragArea);
var that = this;
dragArea.on("drop", function () {
  that._dropFiles();
  that._handleFileDrop();
});

Answer 2

如果你真的想要烘干机...

[this._dropFiles, this._handleFileDrop].forEach(function(fun){
    document.getElementById(this.config.dragArea).addEventListener("drop", fun);
});

请注意，forEach在 IE8 上需要一个 shim for。

您还可以更合理地简单地存储document.getElementById(this.config.dragArea)在变量中并重用它。