jsEventBubleing

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>Random</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
            border: 1px solid black;
        }

        .centered {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div >
        <div id="mainDiv" class="centered" tabindex="1">Main Div Content
            <div id="innerDiv" tabindex="2">
                <p id="innerP">Random number</p>
                <h1 id="output">
                    0
                </h1>
                <button id="add">Add</button>
                <button id="reset">Zero</button>
                <button id="sub">Sub</button>
            </div>
        </div>
    </div>
    <script>
        'use strict'


        const main = document.getElementById('mainDiv');
        const inner = document.getElementById('innerDiv');
        const reset = document.getElementById('reset');

        main.addEventListener('click', (event) => {
            console.log(`${event.target.id} clicked! Handled by ${event.currentTarget.id} on bubleing!`);
        });

        inner.addEventListener('click', (event) => {
            console.log(`${event.target.id} clicked! Handled by ${event.currentTarget.id} on bubleing!`);
        });

        reset.addEventListener('click', (event) => {
            event.stopImmediatePropagation();
            console.log(`${event.target.id} clicked! Handled by ${event.currentTarget.id} on bubleing!`);
        });

        reset.addEventListener('click', (event) => {
            console.log(`Reset clicked!`);
        });
        //main.addEventListener('click', (event) => {

        //    const operation = event.target.id;
        //    const out = document.getElementById('output');

        //    if (operation == "add") {
        //        out.innerText = +out.innerText + 1;
        //    } else if (operation == "sub") {
        //        out.innerText = +out.innerText - 1;
        //    } else {
        //        out.innerText = 0;
        //    }

        //    console.log(`${event.target.id} clicked! Handled by ${event.currentTarget.id} on bubleing!`);
        //});

        //main.addEventListener('click', (event) => {
        //    console.log(`${event.target.id} clicked! Handled by ${event.currentTarget.id} on diving!`);
        //}, { capture: true });
    </script>
</body>

</html>