如何遍历事件对象的键？

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)

但是，如果我在同一个打印函数中设置断点，并询问 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' 和 'code'，还有 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 
  _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

如何遍历事件对象的键？

How to iterate through the keys of a event object?

javascript

keydown

javascript-objects

dom-events

ecmascript-6