如何遍历事件对象的键？

Question

如何遍历事件对象的键？

javascriptecmascript-6javascript-objectsdom-eventskeydown

6

我正在进行调试。我希望能够打印出keydown事件的所有字段：

 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做了什么。（这才是问题的核心所在。)

请注意，目前我没有打算询问这里的值的递归下降。我只想打印顶层键及其值。

- user10469346

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Giorgos Papageorgiou · Accepted Answer

你尝试做的问题是，想要迭代那些不可枚举或不属于对象所有的属性。

“可枚举属性是指其内部可枚举标志设置为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 https://dev59.com/5Wsz5IYBdhLWcg3wQFYq#8024294
  _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)

最初的回答：

请阅读此文章以获取更多细节。属性的可枚举性和所有权