Question

我还没有使用eventlistener很长时间，现在我尝试使用多个eventlistener（或一个eventlistener用于多个事件）并同时绑定。它进展得不是那么顺利。我试图做的一件事是在同一个对象中有两个按钮指向不同的方法（this.a和this.b，见下文）。我希望按钮属于HTML代码中的相同表单元素。我该怎么做呢？

这是代码的简化版本：

HTML

<form id="form">
    <div ID="buttons">
        <button id="buttonA" type="submit">A</button>
        <button id="buttonB" type="submit">B</button>
    </div>
</form>

JS（没有工作）

var Example = function() {
    //properties
}

Example.prototype.a = function() {
    document.querySelector("#buttonA").removeEventListener("submit", this.methodA);
    // do stuff
}

Example.prototype.b = function() {
    document.querySelector("#buttonB").removeEventListener("submit", this.methodB);
    // do stuff
}

Example.prototype.decision = function() {
    this.methodA = this.a.bind(this);
    this.methodB = this.b.bind(this);

    document.querySelector("#form").addEventListener("submit", function(event) {
    event.preventDefault();
    });

    document.querySelector("#buttonA").addEventListener("submit", this.methodA, false);
    document.querySelector("#buttonB").addEventListener("submit", this.methodB, false);
}

正如您所看到的，代码现在变得一团糟。即使它确实有效（它没有），我也不确定这是最好的方法，因为我必须单独听按钮（理想情况下，我认为，你只会听#form）。

什么是正确和有效的解决方案？

顺便说一下，方法a和b有点像以前的状态＆＃34;状态＆＃34;在用户可以通过单击按钮返回的程序中。

Answer 1

处理表单上的click事件，并在该句柄中根据事件的target属性决定下一个要调用的函数：

var Example = function() {
    this.testA = "AAA";
    this.testB = "BBB";
}

Example.prototype.a = function() {
    alert(this.testA);
}

Example.prototype.b = function() {
    alert(this.testB);
}

var exam = new Example();

document.querySelector("#form").addEventListener("click", function(event) {
    event.preventDefault();
    switch(event.target.id) {
    	case "buttonA":
      	exam.a.apply(exam);
        exam.a();
      	break;
			case "buttonB":
      	exam.b.apply(exam);
        exam.b();
      	break;        
    	default:
      	break;
    }
});

<form id="form">
    <div ID="buttons">
        <button id="buttonA" type="submit">A</button>
        <button id="buttonB" type="submit">B</button>
    </div>
</form>

同时绑定多个事件（JavaScript）

1 个答案: