javascript - 如何遍历事件对象的键？

Question

我正在调试。我想打印按键事件的所有字段:

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

和，

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

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

(keydown    isTrusted:true)

但是，如果我在同一个 print 函数中设置断点，并询问 Chrome“stuff”对象的值是什么，我会得到:

> stuff
KeyboardEvent {isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
code: "KeyA"
... and a hundred more things

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

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

当然，我想知道“ key ”和“代码”，但也想知道 Chrome 在第一层放置的所有其他内容，甚至是我不能特别要求的内容，因为我不知道 Chrome 有什么完毕。 (成为事情的重点。)

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

Answer 1

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

"Enumerable properties are those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer"

"Ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain."

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

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)

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

Enumerability and ownership of properties