如何将事件对象转换为字符串？

Question

JSON.stringify(eventObject);

返回：

TypeError: 将循环结构转换为JSON

---

dojox.json.ref.toJson(eventObject);

返回：

TypeError: 访问无法有选择的输入元素上的selectionEnd。

---

是否有一些库/代码可以直接使用来实现它？

- Tar

---

你是想查看结构以从对象中提取某些方法，还是想要将其“字符串化”？ - Robert

调试PhoneGap - 将数据结构、事件和堆栈跟踪发送到本地层。 - Tar

Answer 1

使用JSON.stringify无法序列化事件对象，因为事件对象包含对DOM节点的引用，而DOM中存在各种循环引用（例如父/子关系）。默认情况下，JSON无法处理这些引用，所以您需要另寻他路。

我建议您查看如何将DOM节点序列化为JSON，即使存在循环引用？，其中提供了一些关于如何序列化DOM节点的建议。此外，以下问题似乎包含有用信息：

• 如何保存具有循环引用的对象？
• 如何将带有循环引用的JavaScript对象字符串化（转换为JSON）

能够处理循环引用的JSON库包括：

• JSON-js（请参见cycle.js）
• dojox.json.ref

或者，如果您不需要它们，您可以删除所有对DOM节点的引用，然后序列化对象。您不应该这样做。请参阅@PointedEars评论 :)

- fresskoma

---

事件对象是宿主对象。不要对它们进行操作，比如尝试删除它们的属性或者赋值给不应该被赋值的属性。 - PointedEars

Answer 2

使用“替换器”函数以避免错误：

JSON.stringify(evt, function(k, v) {
    if (v instanceof Node) {
        return 'Node';
    }
    if (v instanceof Window) {
        return 'Window';
    }
    return v;
}, ' ');

更新2019年：浏览器API已有一定改变，这里提供了一种方法来暴露事件原型链中所有可用的键。

function stringifyEvent(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }
  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}

- Alexander Shutau

---

这也导致 MouseEvent 的 {isTrusted: true}。 - Blightbuster

我之所以要给这个投票点踩，是因为它只返回“Node”而不是事件对象中通常需要的所有信息。 - Preston Badeer

你可以创建一个自定义算法来处理循环引用，返回构造函数名称、选择器等，这由你决定。 - Alexander Shutau

Answer 3

我曾经遇到过类似问题，并编写了一个简单的事件序列化程序，同时还编写了一个帮助方法来清理事件的路径属性。这个解决方案的处理方式是将数据从事件对象转换为可序列化的对象：

• 将基本属性复制过去
• 将HTML元素属性的outerHTML复制到事件对象中
• 计算路径属性的选择器路径（这样可以避免复制整个HTML页面的outerHTML）

// Calculate a string representation of a node's DOM path.
var pathToSelector = function(node) {
  if (!node || !node.outerHTML) {
    return null;
  }

  var path;
  while (node.parentElement) {
    var name = node.localName;
    if (!name) break;
    name = name.toLowerCase();
    var parent = node.parentElement;

    var domSiblings = [];

    if (parent.children && parent.children.length > 0) {
      for (var i = 0; i < parent.children.length; i++) {
        var sibling = parent.children[i];
        if (sibling.localName && sibling.localName.toLowerCase) {
          if (sibling.localName.toLowerCase() === name) {
            domSiblings.push(sibling);
          }
        }
      }
    }

    if (domSiblings.length > 1) {
      name += ':eq(' + domSiblings.indexOf(node) + ')';
    }
    path = name + (path ? '>' + path : '');
    node = parent;
  }

  return path;
};

// Generate a JSON version of the event.
var serializeEvent = function(e) {
  if (e) {
    var o = {
      eventName: e.toString(),
      altKey: e.altKey,
      bubbles: e.bubbles,
      button: e.button,
      buttons: e.buttons,
      cancelBubble: e.cancelBubble,
      cancelable: e.cancelable,
      clientX: e.clientX,
      clientY: e.clientY,
      composed: e.composed,
      ctrlKey: e.ctrlKey,
      currentTarget: e.currentTarget ? e.currentTarget.outerHTML : null,
      defaultPrevented: e.defaultPrevented,
      detail: e.detail,
      eventPhase: e.eventPhase,
      fromElement: e.fromElement ? e.fromElement.outerHTML : null,
      isTrusted: e.isTrusted,
      layerX: e.layerX,
      layerY: e.layerY,
      metaKey: e.metaKey,
      movementX: e.movementX,
      movementY: e.movementY,
      offsetX: e.offsetX,
      offsetY: e.offsetY,
      pageX: e.pageX,
      pageY: e.pageY,
      path: pathToSelector(e.path && e.path.length ? e.path[0] : null),
      relatedTarget: e.relatedTarget ? e.relatedTarget.outerHTML : null,
      returnValue: e.returnValue,
      screenX: e.screenX,
      screenY: e.screenY,
      shiftKey: e.shiftKey,
      sourceCapabilities: e.sourceCapabilities ? e.sourceCapabilities.toString() : null,
      target: e.target ? e.target.outerHTML : null,
      timeStamp: e.timeStamp,
      toElement: e.toElement ? e.toElement.outerHTML : null,
      type: e.type,
      view: e.view ? e.view.toString() : null,
      which: e.which,
      x: e.x,
      y: e.y
    };

    console.log(JSON.stringify(o, null, 2));
  }
};

// Create a mock event for this example
var evt = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window
});
var cb = document.getElementById("clicker");

// Add a click listener
cb.addEventListener("click", serializeEvent);

// Fire the event
cb.dispatchEvent(evt);

<div>
  <button id="clicker" /> JSONify my click!
</div>

- Josh Hibschman

---

这应该是被接受的答案。是的，您需要根据自己的需求稍微定制内部工作，但总体来说这很棒！如果您想重新创建整个事件，可以进行一些小的添加：查找需要执行的事件，请对 o.eventName 进行字符串操作，将 o.view 替换为一个对象（通常是 window），并通过解析 o.target 来获取目标元素，例如请参见此处。 - npetrov937

Answer 4

这是由Alexander Shutau提供的代码的升级版，因为它处理多层对象（ES6）：

function stringify_object(object, depth=0, max_depth=2) {
    // change max_depth to see more levels, for a touch event, 2 is good
    if (depth > max_depth)
        return 'Object';

    const obj = {};
    for (let key in object) {
        let value = object[key];
        if (value instanceof Node)
            // specify which properties you want to see from the node
            value = {id: value.id};
        else if (value instanceof Window)
            value = 'Window';
        else if (value instanceof Object)
            value = stringify_object(value, depth+1, max_depth);

        obj[key] = value;
    }

    return depth? obj: JSON.stringify(obj);
}

只需像这样调用：

stringify_object(event, 2);

例如，在触摸开始事件上，我得到了这个：

touchstart : {"isTrusted":true,"touches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"targetTouches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"changedTouches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"altKey":false,"metaKey":false,"ctrlKey":false,"shiftKey":false,"view":"Window","detail":0,"sourceCapabilities":{"firesTouchEvents":true},"which":0,"initUIEvent":{},"NONE":0,"CAPTURING_PHASE":1,"AT_TARGET":2,"BUBBLING_PHASE":3,"type":"touchstart","target":{"id":"screen"},"currentTarget":{"id":"screen"},"eventPhase":2,"bubbles":true,"cancelable":true,"defaultPrevented":false,"composed":true,"timeStamp":192516.7899999651,"srcElement":{"id":"screen"},"returnValue":true,"cancelBubble":false,"path":{"0":{"id":"screen"},"1":{"id":"back"},"2":{"id":""},"3":{"id":""},"4":{},"5":"Window"},"composedPath":{},"stopPropagation":{},"stopImmediatePropagation":{},"preventDefault":{},"initEvent":{}}

- Octo Poulos

Answer 5

不确定是否有帮助，但我刚在Angular JS文档中偶然发现了这个：

*来源：https://code.angularjs.org/1.5.5/docs/guide/expression#-event-

/*
 * return a copy of an object with only non-object keys
 * we need this to avoid circular references
 */
function simpleKeys (original) {
  return Object.keys(original).reduce(function (obj, key) {
    obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
    return obj;
  }, {});
}

现在你可以做类似这样的事情：

JSON.stringify(simpleKeys(eventObject));

- bjunix

---

当在触摸事件上使用它时，它仅返回一个单一的元素 {isTrusted: true}。 - user736893

所有其他的 MouseEvent 都是相同的。 - Blightbuster

Answer 6

所以，问题在于JSON.stringify一旦发现循环引用就会退出。我本来也不关心循环引用的属性。我得到其余属性的方法是

var str = "{"
for (var key in data) {
  if (JSON.stringify(data[key]) !== "") {
    str += key + ":" + data[key]) + ",";
  }
}
str += "}"

这将基本上给你其余的属性。为了避免JS错误，您可以将其放在try/catch中。

- Saurabh

Answer 7

只需使用 JSON.stringify(event) ，事件数据就会被转换为字符串。

- Ali