Загрузка данных

<!DOCTYPE html>
<html>
<head>
    <title>Всплытие и погружение</title>
    <style>
        #grandparent, #parent, #child { padding: 15px; margin: 5px; border: 1px solid #333; }
        #output { margin-top: 10px; padding: 10px; background: #eee; }
    </style>
</head>
<body>
    <button id="toggleCapturing">Вкл/Выкл погружение</button>
    <button id="toggleBubbling">Вкл/Выкл всплытие</button>
    <div id="grandparent">
        Grandparent
        <div id="parent">
            Parent <div id="child">Child (кликни)</div>
        </div>
    </div>
    <div id="output"></div>
    <script>
        const els = ['grandparent', 'parent', 'child'].map(id => document.getElementById(id));
        const [grandparent, parent, child] = els;
        const output = document.getElementById('output');
        let capturing = false;
        let bubbling = true;
        function log(el, phase) { output.innerHTML += `${phase}: ${el.id}<br>`; }
        function setupListeners() {
            els.forEach (el => {
                el.removeEventListener('click', handler, true);
                el.removeEventListener('click', handler, false);
                if (capturing) el.addEventListener('click', handler, true);
                if (bubbling) el.addEventListener('click', handler, false); } ); }
        function handler(e) {
            const phase = e.eventPhase === 1 ? 'CAPTURING' : e.eventPhase === 2 ? 'TARGET' : 'BUBBLING';
            log(this, phase); }
        document.getElementById('toggleCapturing').addEventListener('click', () =>
         { capturing = !capturing; setupListeners(); });
        document.getElementById('toggleBubbling').addEventListener('click', () =>
         { bubbling = !bubbling; setupListeners();});
        setupListeners();
    </script>
</body>
</html>