绑定事件委托？ （JavaScript）的

Question

您知道有时候您想为多个元素使用一个eventlistener吗？像这样：

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

你知道有时候你想使用带有eventlistener的bind来改变eventhandler的范围吗？例如，您可能需要引用“this”并指向特定的内容。

如果你想为多个元素设置一个eventlistener并同时使用bind，那该怎么办？

就我而言，我希望能够从一个方法（Example.prototype.methodA）转到同一个对象中的另外两个方法之一（Example.prototype.methodB或Example.prototype.methodC）单击按钮。因为eventlistener放在methodA中，所以其他方法将使用this.methodB和this.methodC引用。我可以单独使用bind实现两个eventlistener，但是是否可以只有一个eventlistener？

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或地图查找或...

直播示例：

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;