Как применить обработчик событий

[spoon100500]

Такая ситуация, есть три кнопки и три скрытых области и кнопка Расчет, каждая область выполняет определенные функции прописанные только для этой области, т.е. при нажатии кнопки 1 появляется область 1 с определенными функциями 1, при нажатии кнопки 2 появляется область 2 с определенными функциями 2, а область 1 исчезает и т.д. но есть кнопка Расчета, она одна для всех областей т.е. нажали кнопку 1 появилась область 1, нажали кнопку Расчет получили значение области 1; нажали кнопку 2, область 1 скрылась появилась область 2, нажали кнопку Расчет получили результат области 2 и т.д.
Можно конечно в каждой области сделать кнопку Расчет и вывода результата, но как то это не эстетично, к то муже кнопка Расчет и поле вывода результата они постоянны, а скрытые области имеют разные параметры.
Я понимаю так, все это делается через addEventListener и removeEventListener?
Если можно показать пример реализации?

[pompiduskus]

Можно по разному все это дело реализовать.

Можно через addEventListener а если разметка будет все время одного типа, то можно просто и вот так подписаться на события

PHP код:

<elem id="myId" onclick="foo()"></elem>
<script>
function foo(){
    // ...
}
</script> 


Можно еще вот так

PHP код:

<elem id="myId"></elem>

<script>
window.addEventListener('load', function(){

    var myId = document.getElementById("myId");
    myId.onclick = function(){
        console.log( this.id ); // >> myId
    }

    myId.onmouseover = function(){}

});

</script> 


Да вообще можно как хочешь сделать. Даже можо на лету создавать елементы разметки при помощи JS, сразу на них вешать все что нужно, и прикреплять их к DOMу

PHP код:

<script>
var elem = document.createElement("div");
elem.className = 'MyCssClassName';
elem.id = 'myId';

elem.onclick = function(){}
document.body.appendChild( elem );
</script>