I am a newbie to JS.I am building a calculator . I am using event delegation to add event listeners however There is a small error. when i click on button of a calculator i access its html However when i accidentaly click somewhere else i select the entire Div . How to select only the necessary buttons , Below is my code .

  <div class="calculator">
        <div class="input" id="input"></div>
        <div class="buttons">
            <div class="operators">
                <div>+</div>
                <div>-</div>
                <div>&times;</div>
                <div>&divide;</div>
            </div>
            <div class="leftPanel">
                <div class="numbers">
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                </div>
                <div class="numbers">
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                </div>
                <div class="numbers">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </div>
                <div class="numbers">
                    <div>0</div>
                    <div>.</div>
                    <div id="clear">C</div>
                </div>
            </div>
            <div class="equal" id="result">=</div>
        </div>
    </div>

Below is the JS Code I use to add event listeners .

var number = document.querySelector(".leftPanel");
 number.addEventListener("click", (event) => {
        console.log(event.target);
        Data = Data + event.target.innerHTML;
        //  console.log(Data);
        input.innerHTML = globalNumber ? globalNumber + Data : Data;
        if (Data[Data.length - 1 === '+'] || Data[Data.length - 1 === '-']) {
            isOperator = true;
        }
    });

the event target also selects all the numbers inside the div. how do i select only the button and not the entire Div ?