Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Eventos en JS — Ejemplo 1</title>
    <style>
        body    { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 650px; }
        h3      { margin: 22px 0 8px; font-size: 15px; color: #333; }
        button  { padding: 8px 18px; background: #F7DF1E; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px; margin: 4px; }
        button:hover { background: #e6cc00; }
        .log    { background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; padding: 10px 14px; min-height: 40px; font-family: monospace; font-size: 13px; margin-top: 8px; max-height: 140px; overflow-y: auto; }
        .caja   { width: 160px; height: 80px; background: #fff9c4; border: 2px solid #F7DF1E; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: background 0.2s; user-select: none; margin-top: 8px; }
        .caja:hover { background: #fff3a0; }
        input   { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box; margin-top: 6px; }
        .kbd    { display: inline-block; background: #eee; border: 1px solid #ccc; border-radius: 4px; padding: 2px 7px; font-family: monospace; font-size: 13px; }
    </style>
</head>
<body>

<h2>Eventos — Click, teclado y mouse</h2>

<h3>Eventos de clic</h3>
  <button id="btnClick">Hacé clic</button>
  <button id="btnDblClick">Doble clic</button>
  <button id="btnReset">Resetear</button>
  <div class="log" id="logClick">Esperando eventos...</div>

<h3>Eventos de mouse sobre un elemento</h3>
  <div class="caja" id="caja">Pasá el mouse por acá</div>
  <div class="log" id="logMouse">Esperando eventos de mouse...</div>

<h3>Eventos de teclado</h3>
  <input type="text" id="inputTeclado" placeholder="Escribí algo y observá los eventos...">
  <div class="log" id="logTeclado">Esperando teclas...</div>

<h3>Shortcuts de teclado</h3>
  <p style="font-size:13px;color:#555;">Presioná: <span class="kbd">Ctrl + B</span> → negrita | <span class="kbd">Ctrl + I</span> → cursiva | <span class="kbd">Escape</span> → limpiar</p>
  <div id="textoEfecto" style="padding:10px;border:1px solid #eee;border-radius:6px;min-height:36px;font-size:15px;">Texto de ejemplo</div>
  <div class="log" id="logShortcut" style="margin-top:6px;">Esperando shortcuts...</div>

// ── Clic y doble clic ─────────────────────────────────────────────────
    let clics = 0;
    document.getElementById("btnClick").addEventListener("click", () => {
        clics++;
        agregarLog("logClick", `click #${clics}`);
    });

document.getElementById("btnDblClick").addEventListener("dblclick", () => {
        agregarLog("logClick", `¡DOBLE CLIC detectado!`);
    });

document.getElementById("btnReset").addEventListener("click", () => {
        clics = 0;
        document.getElementById("logClick").textContent = "Log limpiado.";
    });

// ── Mouse sobre elemento ──────────────────────────────────────────────
    const caja = document.getElementById("caja");

caja.addEventListener("mouseenter", () => {
        caja.style.background = "#fff3a0";
        agregarLog("logMouse", "mouseenter — el mouse entró");
    });

caja.addEventListener("mouseleave", () => {
        caja.style.background = "#fff9c4";
        agregarLog("logMouse", "mouseleave — el mouse salió");
    });

caja.addEventListener("click", () => {
        agregarLog("logMouse", "click — clic izquierdo");
    });

caja.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        agregarLog("logMouse", "contextmenu — clic derecho (prevenido)");
    });

caja.addEventListener("dblclick", () => {
        agregarLog("logMouse", "dblclick — doble clic");
    });

// ── Teclado en input ──────────────────────────────────────────────────
    const inputTeclado = document.getElementById("inputTeclado");

inputTeclado.addEventListener("keydown", (e) => {
        const mods = [
            e.ctrlKey  ? "Ctrl"  : "",
            e.shiftKey ? "Shift" : "",
            e.altKey   ? "Alt"   : "",
        ].filter(Boolean).join("+");
        const combo = mods ? `${mods}+${e.key}` : e.key;
        agregarLog("logTeclado", `keydown → "${combo}" (code: ${e.code})`);
    });

inputTeclado.addEventListener("input", (e) => {
        agregarLog("logTeclado", `input → valor: "${e.target.value}"`);
    });

// ── Shortcuts globales ────────────────────────────────────────────────
    const textoEfecto = document.getElementById("textoEfecto");

</body>
</html>