Javascript 为什么从onclick属性调用的函数write（）解析为document.write（）？

为什么通过onclick属性调用的

write（）

函数会解析为

document.write（）

并替换文档？有没有办法阻止这种事情发生

<!-- Replaces the document with the text "from onclick." -->
<button onclick="write('from onclick.')">Write Function</button>

<!-- Logs the text "Alternate write function triggered... from onclick." -->
<button onclick="altWrite('from onclick.')">Alternate Write Function</button>

<script>
  function write (arg) {
    console.log("Write function triggered... " + arg);
  }

  function altWrite (arg) {
    console.log("Alternate write function triggered... " + arg);
  }

  // Logs the text "Write function triggered... from code."
  write("from code.");

  // Logs the text "Alternate write function triggered... from code."
  altWrite("from code.");
</script>

写函数
交替写入功能
函数写入（arg）{
日志（“写入功能触发…”+arg）；
}
函数altWrite（arg）{
console.log（“触发了备用写入功能…”+arg）；
}
//记录文本“从代码中触发写入函数”
写（“来自代码”）；
//记录文本“从代码触发的备用写入函数”
altWrite（“来自代码”）；
内联处理程序不幸地具有非直观的
块，用于：

（1） 调用它们的元素（此处为按钮）

（2） 该文件：


因此，当从内联处理程序调用
write
时，作用域链首先看到
document
上的
write
属性（并将其作为结果调用），而不是继续搜索
window
上的
write
属性（您定义的write函数存在于此）

解决方案是不使用内联处理程序：而是使用
addEventListener


函数写入（arg）{
日志（“写入功能触发…”+arg）；
}
函数altWrite（arg）{
console.log（“触发了备用写入功能…”+arg）；
}
const[button1，button2]=document.queryselectoral（'button'）；
按钮1.addEventListener（“单击”，写入）；
按钮2.addEventListener（“单击”，altWrite）
写函数
备用写入功能
onclick=“window.Write（'from onclick'）”