let btn = document.querySelector("button");

// addEventListener（推荐）
btn.addEventListener("click", function(event) {
    console.log("按钮被点击！", event);
});

// 箭头函数
btn.addEventListener("click", (e) => {
    console.log("点击坐标：", e.clientX, e.clientY);
});

// ⚠️ onclick 属性（不推荐，只能绑定一个）
// btn.onclick = function() { ... };

// 移除事件
function handler() { console.log("once"); }
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

document.addEventListener("click", (e) => {
    // 鼠标位置
    console.log("页面坐标:", e.pageX, e.pageY);
    console.log("窗口坐标:", e.clientX, e.clientY);

    // 目标元素
    console.log("点击的元素:", e.target);
    console.log("绑定事件的元素:", e.currentTarget);

    // 阻止默认行为
    // e.preventDefault();

    // 阻止冒泡
    // e.stopPropagation();
});

// 鼠标事件
el.addEventListener("click", handler);       // 单击
el.addEventListener("dblclick", handler);    // 双击
el.addEventListener("mousedown", handler);   // 按下
el.addEventListener("mouseup", handler);     // 释放
el.addEventListener("mouseenter", handler);  // 进入（不冒泡）
el.addEventListener("mouseover", handler);   // 进入（冒泡）
el.addEventListener("mouseleave", handler);  // 离开

// 键盘事件
document.addEventListener("keydown", (e) => {
    console.log(e.key, e.code); // "Enter"  "Enter"
    // 组合键
    if (e.ctrlKey && e.key === "s") {
        e.preventDefault();
        console.log("Ctrl+S 被按下");
    }
});

// 表单事件
input.addEventListener("input", handler);    // 输入变化
input.addEventListener("change", handler);   // 值确认变化
input.addEventListener("focus", handler);    // 获得焦点
input.addEventListener("blur", handler);     // 失去焦点
form.addEventListener("submit", handler);    // 提交

// once：只触发一次
btn.addEventListener("click", () => {
    console.log("只执行一次");
}, { once: true });

// passive：不调用 preventDefault（性能优化）
document.addEventListener("touchstart", handler, { passive: true });

// capture：捕获阶段触发（默认 false 为冒泡阶段）
el.addEventListener("click", handler, { capture: true });