事件对象

事件处理函数的写法差异（如 function(event)和 (e) =>）主要源于 JavaScript 的语法演进和不同场景的编码习惯，但本质是相同的。以下是详细解释：

1. 两种写法的本质

两种写法都用于定义函数，且参数 event和 e是同一个事件对象，只是参数名不同（event是完整命名，e是简写）。

区别在于函数类型：

• function(event)：传统函数声明，有独立的 this绑定。
• (e) =>：箭头函数，无独立 this（继承外层作用域的 this）。

2. 为什么写法不同？

(1) 历史原因：ES5 与 ES6+ 的演进

• ES5 及之前：普遍使用 function(event)，因为箭头函数尚未出现。

button.addEventListener('click', function(event) {
    console.log(this); // 指向触发事件的元素（button）
});

• ES6 引入箭头函数后，简化了写法，且避免了 this的混淆问题：

button.addEventListener('click', (e) => {
    console.log(this); // 指向外层作用域的 this（如组件实例）
});

(2) 框架的推荐风格

• React/Vue：推荐箭头函数，因为需要保持 this指向组件实例。

// React 示例
<button onClick={(e) => this.handleClick(e)}>点击</button>

• 传统 DOM 操作：可能仍用 function(event)，若需要通过 this访问触发元素。

(3) 参数名的简写习惯

• 开发者通常用 e代替 event以简化代码（两者完全等价）：

// 以下两种写法效果相同
element.addEventListener('input', function(event) {});
element.addEventListener('input', (e) => {});

3. 关键区别：this的指向

• function(event)：
  this默认指向触发事件的元素（如 button），适合需要操作 DOM 的场景。

button.addEventListener('click', function(event) {
    console.log(this); // 输出 <button> 元素
});

• 箭头函数 (e) =>：
  this继承自外层作用域（如组件实例），避免意外绑定问题。

class Component {
    handleClick() {
        button.addEventListener('click', (e) => {
            console.log(this); // 指向 Component 实例
        });
    }
}

4. 如何选择？