为什么 console.log 的行为与 .innerText/.innerHTML 属性不同

Question

我想用下面的代码写一个答案给另一个，但console.log行为与.innerText / .innerHTML属性不同。 为什么？ 如何将console.log的输出显示在屏幕而不是控制台上？

HTML,

<button type="button" id="click">Click <strong>me</strong></button>

Javascript，

const ll = document.querySelector(`#click`);
const tt = document.createElement(`div`);
const t = document.createElement(`p`);
ll.addEventListener(`click`, function (event) {
  t.innerText += event;
  t.innerText += event.target;
  t.innerText += event.currentTarget;
  tt.appendChild(t);
  document.body.appendChild(tt);
  console.log(event);
  console.log(event.target);
  console.log(event.currentTarget);
});

Edit:我使用.innerHTML得到相同的结果

Answer 1

分配给.innerText将始终将分配的值转换为字符串。 执行console.log时不会发生这种情况

console API 根据其类型呈现值。 值得注意的是，对象以某种交互（折叠/展开）方式表示，使用特定的字体样式（颜色、斜体等）来向用户提供更多提示。 此外， console显示不一定是自己的属性或可枚举的属性。 要自己重现这一点，将需要相当多的编码。

您可以使用一个函数创建一个 JSON 表示的属性（包括继承的），这些属性是原始值而不是空值，并且属性名称不是全部大写（通常表示常量），您可以获得很长的路要走。

此外，在保留换行符的 DOM 元素中显示（空白是预先）：

 function objectString(obj) { let result = {} for (let prop in obj) { if (typeof obj[prop] !== "function" && typeof obj[prop] !== "object" && prop.toUpperCase() !== prop) { result[prop] = obj[prop]; } } return obj.constructor.name + ":\\n" + JSON.stringify(result, null, 2) + "\\n"; } const ll = document.querySelector(`#click`); const tt = document.createElement(`div`); const t = document.createElement(`pre`); ll.addEventListener(`click`, function(event) { t.innerText = objectString(event) + objectString(event.target) + objectString(event.currentTarget); tt.appendChild(t); document.body.appendChild(tt); });

 <button type="button" id="click">Click <strong>me</strong></button>

Answer 2

您需要使用 mouseevent 所需的属性。

您的控制台日志正在记录 event.target，即单击按钮的名称。

您的控制台具有所有事件属性，包括 screenX、screenY 等。如果您需要这些属性，请将 event.target 更改为例如 event.screenX

这些事件的可用属性列表位于： https : //www.w3schools.com/jsref/obj_mouseevent.asp

您还可以研究 innerText、innerHTML 和 textContent 之间的差异