为啥 onclick 函数会返回这个？

Posted 2023-02-21

【中文标题】为啥 onclick 函数会返回这个？

【英文标题】：Why onlick function return this?为什么 onclick 函数会返回这个？

【发布时间】：2021-12-25 02:40:19

【问题描述】：

let classMessage = document.createElement('class');
document.getElementById("chat").prepend(classMessage);
classMessage.id = tabMsg[0];
classMessage.innerhtml += '<button onclick="del(' + tabMsg[0] + ')">Try it</button>'

function del(parsedata) 
console.log(parsedata)

tabMsg 是已解析的行（带有拆分）。

我不明白为什么当我点击按钮时控制台上的输出是：

<class id="vuwzbip6dr"><button onclick="del(vuwzbip6dr)">Try it</button><p>gfdgf gdfgf</p></class>

为什么他不输入 id vuwzbip6dr !!! ?

【问题讨论】：

什么是tabMsg？这个价值从何而来？

@Pointy - 大概是 OP 评论中的字符 v：//tabMsg = string (like vuwzbip6dr)

@RandyCasburn 很确定，但是问题中报告的行为是不可能的。

@Pointy 不是 - 发生的事情是由串联引起的。它最终调用del(v)，这与del(eventTarget) 相同——所以。目标打印出来。我怀疑如果 OP 要正确使用 eventTarget 属性，他会打印出他想要的 ID。

@RandyCasburn 我已经编辑了我的问题 :)

【参考方案1】：

用字符串封装字符串通常会导致比它解决的问题更多的问题，因此应该避免。

在您的情况下，这意味着此声明：

'<button onclick="del(' + tabMsg[0] + ')">Try it</button>' 为您造成了问题。

该行被解释为：

<button onclick="del(v)">Try it</button>

其中v 成为指向this 或currentTarget 元素的标识符，而不是像这样的字符串：“dev('v')”。

查看the documentation 可以看到onclick 处理程序提供了currentTarget 作为回调的第一个参数 - 因此我提到了分配。

要解决此问题，您应该依赖 javascript 提供的工具 - 即，它为您提供 currentTarget（点击的目标元素），因此您所要做的就是使用它并询问它的父元素的 id 属性：

classMessage.innerHTML += '<button onclick=del(this)>Try it</button>'

function del(target) 
    console.log(target.parentNode.id)

但这也不推荐。您应该始终尽量避免使用内联事件处理程序。我会留给你一个不同的问题。