Question

我在addEventListener()上看过一些文档，但我不明白同一函数的第二个和第三个参数的用途。请参考以下代码解释：

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

Answer 1

secong参数是您在事件触发时要运行的函数。您可以使用匿名函数或传递已定义函数的名称。

第三个仅适用于Mozilla .. :( from docs）

useCapture （可选）

如果为true，则useCapture表示用户希望   开始捕获。在开始捕获之后，所有事件都发生了   指定的类型将被分派到注册的侦听器之前   被分派到DOM树下面的任何EventTarget。活动   向上冒泡通过树不会触发听众   指定使用捕获。有关详细信息，请参阅DOM Level 3 Events   说明。如果未指定，则useCapture默认为false。

这基本上意味着从子元素冒泡时不会触发事件。

Answer 2

<强>事件

监听事件的旧方法是在元素上附加“on”命名事件。

一些事件：window.onload，element.onclick，document.onkeyup ....

您提供的参数是您要执行的功能。

window.onload=func

但是在这种情况下你只能传递一个函数（所以如果在你的文档中你有多个window.onload，那么最后一个将总是覆盖前一个函数）

因此他们创建了addEventListener（或者更老的，即AttachEvent）

您创建的每个Eventlistener都会添加一个新的，因此不会覆盖以前的那些。
通过传递一个命名函数，你可以使用removeEventListener删除它们。
事件大致相同，但您不会在事件前面添加“on”。

window.addEventListener('load',func,false);

addEventListener中的第一个参数是你想听的事件。

第二个参数是你想要执行的功能

第三个在@Yotam Omer帖子中有详细描述

当事件发生时，您的第二个参数（函数）将被执行，并将有关该事件的信息发送给该函数。

所以，如果你想获得每个事件的更多细节，你需要定义你的第一个函数参数。

在这种情况下'事件'

var func=function(event){console.log(event)}

此功能记录您需要的有关该事件的所有信息。

现在专门描述您的代码

这是一个包含键盘上按下（和按住）键的对象。

var keysDown = {};

第一个事件处理程序侦听按键事件。所以如果你“keydown”，内联创建的函数会收到事件信息'e'。由于事件是键盘事件，您还可以获得'keyCode'，这是您按下的键的数字代表。函数本身只将按下的键keyCode添加到先前创建的对象 'keysDown'。

document.addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

第二个处理程序侦听'keyup'事件。使用keyCode传递事件'e'信息。如果keyCode存在于对象'keysDown'中，它将被删除。

document.addEventListener("keyup", function (e) {
   delete keysDown[e.keyCode];
}, false);

因此，在按下键盘的同时，'keysDown'对象始终确切地知道哪些键被按下。这对于多键按键（shift + ctrl + letter）等操作非常有用，或者只是为了跟踪按下哪些键。< / p>

您可以通过记录对象来轻松测试结果。

document.addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
    console.log(keysDown)
}, false);

在js中使用addEventListener（）

2 个答案: