如何迭代事件对象的键？

Question

我正在调试。我想打印 keydown 事件的所有字段：

\n\n

 print(tag, stuff={}, newline=true){\n    this.key_transcript_plane.innerHTML += "(" + tag;\n    for (let [key, value] of Object.entries(stuff)) {\n      let key_string = key ? "<em>"+key.toString()+"</em>" : "<em>undefined</em>";\n      let value_string = value ? value.toString() : "<em>undefined</em>";\n      this.key_transcript_plane.innerHTML += "&nbsp &nbsp <em>" + key_string + ":</em>" + value_string;\n    }\n    this.key_transcript_plane.innerHTML += ")";\n    if(newline) this.key_transcript_plane.innerHTML += "<br>";\n  }\n

\n\n

和，

\n\n

   key_input_plane.addEventListener("keydown", (e) => {\n      this.print(\'keydown\', e);\n    });\n

\n\n

但这就是它打印的全部内容：

\n\n

(keydown    isTrusted:true)\n

\n\n

但是，如果我在同一个打印函数中设置断点，并询问 Chrome“stuff”对象的值是多少，我会得到以下结果：

\n\n

> stuff\nKeyboardEvent {isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, \xe2\x80\xa6}\naltKey: false\nbubbles: true\ncancelBubble: false\ncancelable: true\ncharCode: 0\ncode: "KeyA"\n... and a hundred more things\n

\n\n

您可能会同意只是有点不同..

\n\n

控制台显示“isTrusted”，就像我的“print()”函数一样，但随后继续显示“key”、“code”等。控制台知道什么是我不知道的？或者更重要的是，如何打印此事件“e”的所有键和值？

\n\n

当然，我想知道“密钥”和“代码”，还想知道 Chrome 在第一层放入的所有其他内容，甚至是我不能具体要求的内容，因为我不知道Chrome 做了什么。（这是问题的全部要点。）

\n\n

请注意，目前我不打算询问此处值的递归下降。我只是想打印顶级键及其值。

\n

Answer 1

您尝试执行的问题是您想要迭代不可枚举的属性或它们不属于该对象。

“可枚举属性是那些内部可枚举标志设置为 true 的属性，这是通过简单赋值或通过属性初始值设定项创建的属性的默认值”

“属性的所有权取决于该属性是否直接属于该对象而不是其原型链。”

您可以使用类似的方法来获取所有属性。

var typeA = new KeyboardEvent('keydown', {key:'a'});

var SimplePropertyRetriever = {
  getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
      return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
  },
  _enumerableAndNotEnumerable: function(obj, prop) {
      return true;
  },
  // Inspired by http://stackoverflow.com/a/8024294/271577
  _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
      var props = [];

      do {
          if (iterateSelfBool) {
              Object.getOwnPropertyNames(obj).forEach(function(prop) {
                  if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
                      props.push(prop);
                  }
              });
          }
          if (!iteratePrototypeBool) {
              break;
          }
          iterateSelfBool = true;
      } while (obj = Object.getPrototypeOf(obj));

      return props;
  }
};

SimplePropertyRetriever.getOwnAndPrototypeEnumerablesAndNonenumerables(typeA)

您必须阅读这篇文章以了解更多详细信息。

可枚举性和财产所有权