addEventListener回调两种写法对比：传参vs使用this的差异

核心差异 #

1. 回调调用逻辑与this指向 #

• 代码1：通过箭头函数包裹，手动把事件对象的target（触发事件的元素）作为参数传给fillPixel。这里fillPixel作为普通函数直接调用，内部的this默认指向全局对象（非严格模式）或undefined（严格模式），完全不依赖事件绑定的上下文。
• 代码2：直接将fillPixel作为回调传入事件监听，此时JS会自动把触发事件的DOM元素绑定到fillPixel的this上，这是事件监听的默认绑定规则。

2. 元素获取方式 #

• 代码1：通过显式传参拿到要操作的DOM元素，fillPixel的逻辑依赖传入的参数。
• 代码2：通过函数的this指向获取目标元素，fillPixel的逻辑依赖this的绑定结果。

各自的优势与劣势 #

代码1的优劣势 #

• 优势：
  • 逻辑直白，参数传递清晰，新手一眼就能看懂哪个元素在被操作，不容易被this的复杂规则搞晕。
  • 不依赖this，后续如果修改fillPixel的定义（比如改成箭头函数），或者在其他地方单独调用这个函数，都不会因为this变化出问题。
  • 扩展性强，如果需要给fillPixel传递额外数据（比如颜色值、自定义标识），直接在箭头函数里加参数就行，不用改fillPixel本身的结构。
• 劣势：
  • 多了一层箭头函数包裹，代码稍微冗余，而且会额外创建一个函数实例（虽然对性能几乎没影响）。
  • 如果.pixel元素内部有子元素，事件冒泡时e.target可能指向子元素而非.pixel本身，导致操作错误（这种情况应该用e.currentTarget代替e.target）。

代码2的优劣势 #

• 优势：
  • 代码更简洁，直接复用fillPixel函数，没有多余的包裹层，符合JS事件处理的常规写法。
  • 利用事件监听的默认绑定规则，不需要手动传参，逻辑更贴合JS的原生机制。
• 劣势：
  • 对this绑定规则不熟悉的话很容易踩坑，比如把fillPixel改成箭头函数，this就会丢失DOM元素的绑定，代码直接失效。
  • 如果需要传递额外参数，得用bind或者闭包来处理，比代码1麻烦。
  • 要是在非事件场景下调用fillPixel，必须手动绑定this指向某个DOM元素，否则会报错。

适用场景 #

• 代码1适合：JS新手入门阶段，或者需要传递额外参数、不想依赖this绑定的场景。
• 代码2适合：熟悉JSthis规则，追求代码简洁，只需要处理事件触发元素的常规场景。

内容的提问来源于stack exchange，提问作者zft9xgy