事件处理 - JavaScript 基础

← 返回课程JavaScript 基础 › 第 10 关

进度 0%

第 10 关：事件处理

JavaScript入门

📖 本课目标

本关属于《JavaScript 基础》第 10 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

事件处理
模拟事件系统

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 JavaScript，浏览器可直接运行代码并显示真实输出。

main.pytest.py

// 事件处理

// 模拟事件系统
class EventEmitter {
    constructor() {
        this.listeners = {};
    }
    
    addEventListener(event, callback) {
        if (!this.listeners[event]) this.listeners[event] = [];
        this.listeners[event].push(callback);
        console.log("✓ 注册了", event, "事件");
    }
    
    dispatch(event, data) {
        const handlers = this.listeners[event] || [];
        handlers.forEach(handler => handler(data));
    }
}

const button = new EventEmitter();

// 注册点击事件
button.addEventListener("click", (e) => {
    console.log("按钮被点击了！");
});

button.addEventListener("click", (e) => {
    console.log("点击次数 +1");
});

// 注册鼠标事件
button.addEventListener("mouseenter", () => {
    console.log("鼠标进入 → 按钮变色");
});

button.addEventListener("mouseleave", () => {
    console.log("鼠标离开 → 按钮恢复");
});

// 触发事件
console.log("\n--- 模拟交互 ---");
button.dispatch("mouseenter");
button.dispatch("click");
button.dispatch("click");
button.dispatch("mouseleave");

// 常见事件类型
console.log("\n--- 常用事件 ---");
const events = [
    "click     - 点击",
    "input     - 输入框内容变化",
    "submit    - 表单提交",
    "keydown   - 按键按下",
    "scroll    - 页面滚动",
    "load      - 页面加载完成"
];
events.forEach(e => console.log("  " + e));

⚠️ 请勿运行 while(true) 死循环，会卡死本页

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 10 关：事件处理

JavaScript · 入门 · 《JavaScript 基础》

事件处理
模拟事件系统

本关可在浏览器直接运行。