JavaScript HTML DOM Event: blur

The blur event fires when an element stops being focused – for example, when the user clicks somewhere else or hits the Tab key. This event doesn’t travel up the page hierarchy, so you have to attach the listener straight to the field you want to watch. If you’d rather set one listener on a parent element and have it catch all the children, use focusout instead, because that one does propagate.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blur</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <style>
        *, *::before, *::after { 
            box-sizing: border-box; 
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .wrap {
            max-width: 100%;
            margin: 20px auto;
            padding: 16px;
            border: 1px solid green;
            border-radius: 8px;
        }
        
        .row {
            max-width: 100%;
            margin-bottom: 12px;
        }
        
        label {
            display: block;
            margin: 10px 0 6px;
        }
        
        input, button {
            font: inherit;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border-radius: 6px;
        }
        
        input[type="text"]:focus {
            outline: 2px solid #60a5fa;
            outline-offset: 2px;
            border-color: #60a5fa;
        }
        
        .editable {
            min-height: 64px;
            padding: 8px;
            border: 1px solid;
            border-radius: 6px;
        }
        
        /* Visual cue while the element has focus (no background colour) */
        .has-focus {
            outline: 2px solid #93c5fd;
            outline-offset: 2px;
        }
        
        /* Gentle cue after focus is lost (no background) */
        .lost-focus {
            border-color: #64748b;
        }
        
        .inline {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .log {
            margin: 14px auto 0;
            padding: 8px 10px;
            border: 1px solid;
            border-radius: 8px;
            font: 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
            white-space: pre-wrap;
            min-height: 56px;
            max-height: 160px;
            overflow: auto;
        }
        
        .hint {
            font-size: 14px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="wrap" role="form" aria-label="Blur event example (non‑bubbling)">
        <div class="row">
            <label for="name">Name</label>
            <input id="name" type="text" placeholder="Click, type, then leave the field" />
            <div class="hint">
                blur fires when the field loses focus;
            </div>
        </div>
        
        <div class="row">
            <label for="desc">Description (contenteditable)</label>
            <div id="desc" class="editable" contenteditable="true" aria-label="Edit description">
                Click here, then move out …
            </div>
        </div>
        
        <div class="row inline">
            <button type="button" id="focus-name">Focus #name</button>
            <button type="button" id="focus-desc">Focus #desc</button>
            <button type="button" id="blur-name">Blur #name</button>
            <button type="button" id="blur-desc">Blur #desc</button>
            <button type="button" id="reset-all">Clear log & reset fields</button>
        </div>
    </div>
    
    <pre id="log" class="log" aria-live="polite"></pre>
    
    <script>
        (function () {
            const name = document.getElementById("name");
            const desc = document.getElementById("desc");
            const log = document.getElementById("log");
            const focusNameBtn = document.getElementById("focus-name");
            const focusDescBtn = document.getElementById("focus-desc");
            const blurNameBtn = document.getElementById("blur-name");
            const blurDescBtn = document.getElementById("blur-desc");
            const resetBtn = document.getElementById("reset-all");
            
            function write(msg) {
                const t = new Date().toLocaleTimeString();
                log.textContent += `[${t}] ${msg}\n`;
                log.scrollTop = log.scrollHeight;
            }
            
            function wireFocusBlur(el) {
                el.addEventListener("focus", () => {
                    el.classList.add("has-focus");
                    el.classList.remove("lost-focus");
                    write(`focus on #${el.id || "no-id"}`);
                });
                
                el.addEventListener("blur", () => {
                    el.classList.remove("has-focus");
                    el.classList.add("lost-focus");
                    write(`blur on #${el.id || "no-id"}`);
                });
            }
            
            // blur does NOT bubble → attach directly to each element
            wireFocusBlur(name);
            wireFocusBlur(desc);
            
            // Programmatic focus
            focusNameBtn.addEventListener("click", () => name.focus());
            focusDescBtn.addEventListener("click", () => desc.focus());
            
            // Programmatic blur
            blurNameBtn.addEventListener("click", () => name.blur());
            blurDescBtn.addEventListener("click", () => desc.blur());
            
            // Clear log + reset fields
            resetBtn.addEventListener("click", () => {
                log.textContent = "";
                name.value = "";
                desc.textContent = "";
                name.classList.remove("has-focus", "lost-focus");
                desc.classList.remove("has-focus", "lost-focus");
                if (document.activeElement === name || document.activeElement === desc) {
                    document.activeElement.blur();
                }
                write("reset: fields cleared and log emptied");
            });
        })();
    </script>
</body>
</html>
RESULT