javascript - 为什么从 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 block :

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

(2) 文档:

所以，当write从内联处理程序调用，范围链首先看到write属性(property) document (并因此调用它)，而不是继续搜索 write属性(property) window (这是您定义的 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>