jsEventObjectDemo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
    <style>
        body{
            line-height: 25px;
            font-size: 16px;
        }

        form{
            background-color: green;
            width: 200px;
            height: 200px;
            position: relative;
            text-align: center;
        }

        div {
            background-color: red;
            top: 45px;
            left: 45px;
            width: 100px;
            height: 100px;
            position: absolute;
        }

        p {
            background-color: blue;
            top: 25px;
            left: 25px;
            width: 50px;
            height: 50px;
            position: absolute;
            line-height: 25px;
            margin: 0;
        }
    </style>
</head>
<body>
    <form id="form">
        FORM
        <div id="div">
        DIV
            <p id="p">P</p>
        </div>
    </form>

    <script>
        'use strict'

        function onClick(event) {
            event.who ? event.who += `${event.currentTarget.id} # ` : event.who = `${event.currentTarget.id} # `;
            //event.who += `${event.currentTarget.id} # `;
            console.log(`Who got event: ${event.who}`);
        }

        const form = document.getElementById('form');
        form.addEventListener('click', onClick);

        const div = document.getElementById('div');
        div.addEventListener('click', (event) => { event.stopImmediatePropagation(); });
        div.addEventListener('click', onClick);


        const p = document.getElementById('p');
        p.addEventListener('click', onClick);
    </script>
</body>
</html>