时间戳

首页 > 解决方案 > 这两个事件监听回调的添加方式有什么区别？函数 VS 箭头函数调用函数

javascript - 这两个事件监听回调的添加方式有什么区别？函数 VS 箭头函数调用函数

问题描述

  1. 使用以下每种方法需要注意哪些结果？
  2. 如果我需要调用一个函数同时传递一个不是触发事件本身的参数，那么箭头函数方法会更好吗？
document.querySelector('#element').addEventListener('click', () => myFunction1(param1));
document.querySelector('#element').addEventListener('click', myFunction2);

标签： javascriptaddeventlistenerarrow-functions

解决方案

内联调用函数，例如

() => myFunction1(param1)

将要

  • myFunction1不带 a元素的调用this（如果您在顶层，this则函数内部将是 window 对象或undefined）
  • myFunction用参数调用param1而不是点击事件的参数

当您想要引用侦听器在侦听器内部附加到的元素时，第二种方法有时用作速记，例如：

function myFunction2() {
  this.remove();
}
document.querySelector('#element').addEventListener('click', myFunction2);
<button id="element">click</button>

要在第一种方法中做同样的事情，您要么必须#element先将 保存在一个变量中，要么使用 再次选择它querySelector。

如果我需要调用一个函数同时传递一个不是触发事件本身的参数，那么箭头函数方法会更好吗？

是的，这是一种非常常见的做法。

另一种方法是创建一个高阶函数，如下所示：

const makeMyFunction1 = (param) => () => console.log(param);
document.querySelector('#element').addEventListener('click', makeMyFunction1('foo'));
<button id="element">click</button>

另请记住，如果您希望以后能够删除侦听器，则必须使用命名函数：

function myFunction2() {
  console.log('hi');
  this.removeEventListener('click', myFunction2);
}
document.querySelector('#element').addEventListener('click', myFunction2);
<button id="element">click</button>

推荐阅读