Одновременное связывание нескольких событий (JavaScript)

Question

Я не использовал eventlisteners очень долго, и теперь я пытаюсь использовать несколько eventlisteners (или один 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); 
} 

Как вы можете видеть, код бардак прямо Теперь. И даже если это сработало (а это не так), я не уверен, что это лучший способ сделать это, потому что я должен слушать на кнопках отдельно (в идеале, я думаю, вам нужно было бы слушать только # форма).

Что было бы правильным и рабочим решением?

Btw, метод a и b похожи на предыдущие «состояния» в программе, которые пользователь может вернуться, нажав на кнопки.

Answer 1

Handle нажмите событие на форме вместо, а в том, что ручка решать в соответствии с целевой свойство события, функция для вызова следующего:

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) { 
 
    \t case "buttonA": 
 
     \t exam.a.apply(exam); 
 
     exam.a(); 
 
     \t break; 
 
\t \t \t case "buttonB": 
 
     \t exam.b.apply(exam); 
 
     exam.b(); 
 
     \t break;   
 
    \t default: 
 
     \t break; 
 
    } 
 
});

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