bubble.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bubble</title>
    <style>
        body {
            border: 2px solid red;
            margin: 2px;
        }

        section {
            border: 2px solid green;
            margin: 2px;
        }

        ol {
            border: 2px solid purple;
            margin: 2px;
        }

        li {
            border: 2px solid blue;
            margin: 2px;
        }
    </style>
</head>

<body id="body">
    <h1>Explore Event bubble</h1>
    <section id="list-container">
        <h3>List of things</h3>
        <!-- ul>li#item-$*6>lorem2 -->
        <ol id="item-list">
            <li id="item-1">Lorem, ipsum.</li>
            <li id="item-2">Quia, alias!</li>
            <li id="item-3">Quod, dolorum.</li>
            <li id="item-4">Quisquam, cum?</li>
            <li id="item-5">Eligendi, quas.</li>
            <li id="item-6">Minus, explicabo.</li>
            </ul>
    </section>
    <script>
        // list item 2 click handler
        document.getElementById('item-2')
            .addEventListener('click', function (event) {
                console.log('item 2 clicked');
                // event.stopPropagation()
                event.stopImmediatePropagation();
            })
        // list item 2 click handler
        document.getElementById('item-2')
            .addEventListener('click', function (event) {
                console.log('item 2 second clicked');
            })
        // list item 2 click handler
        document.getElementById('item-2')
            .addEventListener('click', function (event) {
                console.log('item 2 third clicked');
            })

        // ol  click handler
        document.getElementById('item-list')
            .addEventListener('click', function () {
                console.log('ol clicked');
            })

        // section click handler
        document.getElementById('list-container')
            .addEventListener('click', function () {
                console.log('section clicked');
            })

        // section click handler
        document.getElementById('body')
            .addEventListener('click', function () {
                console.log('body clicked');
            })
    </script>
</body>

</html>