Question

我正在调试。我想打印一个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

您可能会同意，只是有些不同..

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

我当然想知道“键”和“代码”，但我也想知道Chrome放在第一层的所有其他内容，即使是我不明确要求的东西，因为我不知道Chrome拥有什么完成。（这是问题的全部。）

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

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)

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

Enumerability and ownership of properties

如何遍历事件对象的键？

1 个答案: