为什么从 onclick 属性调用的函数 write() 解析为 document.write()？

Question

为什么通过 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>

Answer 1

不幸的是，内联处理程序有不直观的 with 块：

(1) 调用它们的元素（这里是按钮）

(2) 文档：

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

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

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

function altWrite(arg) {
  console.log("Alternate write function triggered... " + arg);
}
const [button1, button2] = document.querySelectorAll('button');
button1.addEventListener('click', write);
button2.addEventListener('click', altWrite);

<button>Write Function</button>
<button>Alternate Write Function</button>

为什么从 onclick 属性调用的函数 write() 解析为 document.write()？

Why does a function write() called from an onclick attribute resolve to document.write()?

javascript

html

onclick

document.write