javascript - 带绑定(bind)的事件委托(delegate)？ (Javascript)

Question

您知道有时您想对多个元素使用一个事件监听器吗？像这样:

divWithManyLinks.addEventListener("click", function(event) {
    console.log(event.target.textContent);
}
//--> text content of the clicked link 

您知道有时您想将绑定(bind)与事件监听器一起使用来更改事件处理程序的范围吗？例如，您可能需要引用“this”并指向特定的内容。

如果你想为多个元素使用一个事件监听器并同时使用绑定(bind)，这可能吗？

就我而言，我希望能够根据以下内容从一种方法 (Example.prototype.methodA) 转到同一对象中的其他两种方法之一(Example.prototype.methodB 或 Example.prototype.methodC)单击按钮。因为事件监听器放置在 methodA 内部，所以其他方法将通过 this.methodB 和 this.methodC 引用。我可以分别实现两个带有绑定(bind)的事件监听器，但是是否可以只有一个事件监听器？

Example.prototype.methodA = function() {
    // addEventListener that listens on both buttons and executes either this.methodB or this.methodC based on what button is clicked.
}

Example.prototype.methodB = function() {
    // do stuff
}

Example.prototype.methodC = function() {
    // do stuff
}

如果这是不好的做法或者有更好的方法，请告诉我。

Answer 1

你可以做到这一点，是的。这是一个例子:

Example.prototype.methodA = function() {
    someContainerElement.addEventListener("click", function() {
        if (/* `event.target` is a match for the first button*/) {
            this.methodB();
        } else {
            this.methodC();
        }
    }.bind(this), false);
};

当然，它不一定是 if，可以是 switch 或 map 查找或...

实例:

function Example(element, name) {
  this.name = name;
  this.element = element;
  this.output = element.querySelector(".output");
}
Example.prototype.methodA = function() {
  this.element.addEventListener("click", function() {
    if (event.target.name == "B") {
      this.methodB();
    } else {
      this.methodC();
    }
  }.bind(this), false);
}

Example.prototype.methodB = function() {
  this.output.innerHTML =
    prep(this.name).toLowerCase();
};

Example.prototype.methodC = function() {
  this.output.innerHTML =
    prep(this.name).toUpperCase();
};

function prep(text) {
  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

new Example(document.getElementById("one"), "one").methodA();
new Example(document.getElementById("two"), "two").methodA();

<div id="one">
  The "one" element:
  <br>
  <input type="button" name="B" value="Lower">
  <input type="button" name="C" value="Upper">
  <span class="output"></span>
</div>
<div id="two">
  The "two" element:
  <br>
  <input type="button" name="B" value="Lower">
  <input type="button" name="C" value="Upper">
  <span class="output"></span>
</div>