0

我看过一些关于 的文档addEventListener()，但我不明白同一个函数的第二个和第三个参数的目的。请参考以下代码进行说明：

// Handle keyboard controls
var keysDown = {};

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

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

2 回答 2

0

活动

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

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

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

window.onload=func

但在这种情况下，您只能传递一个函数（因此，如果您的文档中有多个 window.onload，则最后一个函数将始终覆盖前一个函数）

所以他们创建了 addEventListener （或在旧版本中，即 AttachEvent）

  1. 您创建的每个 Eventlistener 都会添加一个新的，因此不会覆盖以前的。
  2. 通过传递一个命名函数，您可以使用 removeEventListener 删除它们。
  3. 事件大多相同，但您不会在事件前面添加“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+字母）等操作很有用，或者只是跟踪哪些键被按下。

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

document.addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
    console.log(keysDown)
}, false);
于 2013-07-07T16:46:37.377 回答
0

The secong argument is the function you want to run when the event triggers. You can either use an anonymous function or pass a name of an already defined one..

The third is for Mozilla only..: (from docs)

useCapture (Optional)

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. If not specified, useCapture defaults to false.

Which basically means the the event will not be triggered when bubbling from a child element.

于 2013-07-07T15:24:20.330 回答