在addEventListener中使用this替代document.querySelector()是否正确？

这种写法完全正确，而且比重复调用document.querySelector(".add")更优，原因如下：

• 当你用普通函数（非箭头函数）作为addEventListener的回调时，函数内部的this会自动绑定到触发事件的DOM元素——也就是你绑定点击事件的那个.add按钮。直接用this操作元素，本质上和重新查询DOM拿到的是同一个对象，逻辑完全没问题。
• 重复调用document.querySelector会每次都在DOM树里重新查找元素，虽然这个例子里元素少、性能影响可以忽略，但养成缓存元素或用this的习惯，能避免在复杂页面里出现不必要的性能损耗。

注意事项 #

如果把回调换成箭头函数，this就不会指向触发事件的按钮了——因为箭头函数没有自己的this，会继承外层作用域的this。这时候就不能用this，得提前把按钮元素存起来：

const addBtn = document.querySelector(".add");
addBtn.addEventListener("click", () => {
  // 这里this不指向按钮，必须用提前缓存的addBtn
  addBtn.classList.add("botaoClicado");
});

优化建议 #

你可以把所有需要用到的DOM元素提前缓存，避免每次点击都重复查询，代码会更高效清晰：

// 提前缓存所有需要操作的DOM元素
const addBtn = document.querySelector(".add");
const num1Input = document.querySelector(".num1");
const num2Input = document.querySelector(".num2");
const resultEl = document.querySelector(".result");

addBtn.addEventListener("click", function () {
  let a = Number(num1Input.value);
  let b = Number(num2Input.value);

  this.classList.add("botaoClicado");

  let soma = a + b;
  console.log(soma);

  resultEl.textContent = `RESULTADO: ${soma}`;
});

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