详解JS addEventListener使用的两种方法
作者:admin 时间:2022-5-23 17:22:50 浏览:在 JavaScript 中，事件侦听器(addEventListener)常常被用到，例如对某按钮的点击这一事件上。addEventListener函数与标准函数的执行方式不同，在本文中，我将通过实例介绍事件侦听器addEventListener功能参数的使用。
在 JavaScript 中，有两种方法可以“调度执行”函数：
- 直接执行一个函数：
myFunc() - 为将来执行或某些事件安排功能：
e.addEventListener('click', )myFunc()
你注意到区别了吗？方式1是当脚本加载解析到它时，会立即去执行(调用)一个函数，而方式2却没有这样。
我们看下面的代码片段：
function init() {
// code
console.log("JavaScript Is Love!!")
}
init();上面的代码片段定义了一个函数 ( init)，在该函数内部我们执行一些随机代码。
当然，init里面的代码并不会在脚本加载解析的时候立即执行，它只在函数被调用时执行——使用后面的init()调用。
使用addEventListener的案例
下面的案例与上面的不同，我们看看代码。
function greet() {
alert('你好!');
}
someButton.addEventListener('click', greet);请注意最后一行，greet是没有括号的，不是greet()。
如果添加括号 ( greet())，将执行该函数。这意味着，一旦 JavaScript 执行到达这一行，greet函数内部的代码就会立即运行：
someButton.addEventListener('click', greet());但这通常不是你想要的。当 JavaScript 到达这一行时，你不想立即执行greet，而是希望它在单击按钮 ( someButton) 时执行。
参考与函数结果
在“标准情况”（或称之为直接函数执行）中，只是简单地指示 JavaScript 执行函数内部的代码。
这就是我们在本文的第一个示例中所做的：
function init() {
// 代码
const myElement = document.createElement('li');
myList.append(myElement);
}
init();在第二种情况下（使用按钮和事件侦听器addEventListener），不是直接执行函数，而是“间接地”执行它——通过点击按钮来调用。
因此不能在greet之后添加()，因为那会立即调用该函数。
只需使用
someButton.addEventListener('click', greet);我们只是“指向”函数，我们将函数的引用作为第二个参数传递给addEventListener。
如果代码改为这样
someButton.addEventListener('click', greet());这不是为addEventListener引用greet，而是调用greet()的结果。
那是什么结果？好吧，就是这个函数返回的任何东西。在这个例子中，这是undefined，因为函数没有返回任何东西。如果它有一个return声明，它将是return后面的任何内容。
引用和功能参数
但如果greet看起来像这样呢？
function greet(name) {
alert('Hi ' + name);
}现在它变得有点棘手。greet想要一个参数（name），我们“连接”greet到按钮，如下所示：
someButton.addEventListener('click', greet);JavaScript 如何知道应该输入哪个name值？
答案是：没有。
目前，如果单击按钮，只会得到Hi undefined输出。显然不是我们想要的！
这个问题有两个简单的解决方案：
解决方案 1
someButton.addEventListener('click', function () {
greet('Max'); // 产生 'Hi Max'
});解决方案 2
someButton.addEventListener('click', greet.bind(null, 'Max')); // 也产生 'Hi Max'这会发生什么？
让我们从解决方案 1开始。
在那里，我们创建了一个匿名函数，这个匿名函数作为addEventListener第二个参数。
当 JavaScript 到达该行时，它不会立即执行，因为我们没有在匿名函数定义之后添加括号。
在该函数内部，我们然后调用greet('Max')，但请记住，此代码仅在单击按钮后执行（因为它被匿名函数包装）。
这就是解决方案 1，现在让我们看看解决方案 2。
在那里，我们使用bind()方法。bind()方法在函数对象上可用——为此，重要的是要记住函数也是 JavaScript 中的对象。
bind()方法有什么作用？
它“准备”调用将来执行的函数。它允许“预配置”该函数在最终被调用时应接收的参数。此外，还可以定义this关键字引用该函数内部的内容。参考文章：
准确地说，当我们这样使用bind()时，
someButton.addEventListener('click', greet.bind(null, 'Max')); // 也产生 'Hi Max'我们告诉 JavaScript this 是 null（没有任何值），并且在greet调用它时传递给第一个参数值是Max。
你可以简单地记住，bind第一个参数始终是this关键字引用，之后的所有其他参数都是将被调用的函数的参数（即bind调用的函数）。
因此，“待调用 ”函数的第一个参数将得到传递给bind的第二个参数。“待调用”函数的第二个参数将通过传递给bind的第三个参数来定义。等等。
并且通过使用此代码，我们确保在将来调用它时，Max将作为greet接收的一个值。
总结
本文详细介绍了JS事件监听器 addEventListener使用的两种方法，使用哪种取决于你喜欢哪种方法（匿名函数与bind绑定），最重要的部分是你要了解为什么需要这些方法。
在文章中，我们还指出了使用addEventListener时容易写错的地方，需要特别注意。
您可能对以下文章也感兴趣
- 站长推荐
