How to do an event listener with current functions?

Question

My understanding of an event handler is that it allows the event handler that takes an existing function and allows you to do something with it like a click or some kind of event

What I am trying to do is when the = button is pressed on my calculator it uses the calculation function and takes the if-else statements and applies it to the = sign. For example, if the user clicks 1 + 1 the = sign should add them together and give the answer.

/*********************
Setting up varlaibles*
**********************/

let result;
let num1;
let num2;


/*****************************************
Function for numbers to display on screen*
******************************************/

function buttonPress(numbers) {

  let input = document.querySelector('.answer').innerText.split('\n').join('') + numbers
  let display = document.querySelector('.answer').innerHTML = input
  console.log(`${typeof display} ${display}`)

  if (display.length >= 21) {

    for (let i = 0; i < display.length; i++) {
      document.querySelector('.answer').style.marginTop = -i + "px";
    }
  }
}

  /***********************************
Function for calculation of numbers*
************************************/

function calculation(buttonPress){

switch(numbers){
    case "/":
        numbers / numbers;
        break;
    case "*":
        numbers * numbers;
        break;
    case "+":
        numbers + numbers;
        break;
    case "-":
        numbers - numbers;
        break;
    case "%":
        numbers % numbers;
        break;     
        default:
}
  
buttonPress()
}

<div class="answer"></div>

<div class="row">

  <div class="col">
    <button class="col-op clear" onclick="buttonPress('C')">C</button>
    <button class="col-op" onclick="buttonPress('()')">()</button>
    <button class="col-op" onclick="buttonPress('%')">%</button>
    <button class="col-op" onclick="buttonPress('/')">/</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(1)">1</button>
    <button class="col-num" onclick="buttonPress(2)">2</button>
    <button class="col-num" onclick="buttonPress(3)">3</button>
    <button class="col-op-end" onclick="buttonPress('X')">x</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(4)">4</button>
    <button class="col-num" onclick="buttonPress(5)">5</button>
    <button class="col-num" onclick="buttonPress(6)">6</button>
    <button class="col-op-end" onclick="buttonPress('+')">+</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(7)">7</button>
    <button class="col-num" onclick="buttonPress(8)">8</button>
    <button class="col-num" onclick="buttonPress(9)">9</button>
    <button class="col-op-end" onclick="buttonPress('-')">-</button>
  </div>

  <div class="col">
    <button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
    <button class="col-num" onclick="buttonPress('.')">.</button>
    <button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
  </div>

</div>

The outcome should be with addEventListener that if the user uses operators to with the numbers the = sign should give the answer.