Question

具有此代码

<script>
function faul() { alert("faul"); }
</script>

<form>
  <button onclick="faul()">action</button>
  <input name="faul" required>
</form>

单击按钮将得到faul is not a function，但是当按钮在表单外部或被称为onclick="window.faul()"时，将调用该函数。

请解释冲突。

Answer 1

如果在点击处理程序中执行console.log(faul)，则会看到faul是对具有相同名称的输入的全局引用。

原因是由于历史原因，（大多数（如果不是全部）浏览器）通过使具有name属性的任何元素可用作该名称的引用来污染运行表单元素的内联事件处理程序的范围。顺便说一下，对于任何具有id属性的元素，这都是正确的，但是在全局范围内（如下所示）。

使用addEventListener()代替内联属性添加处理程序将避免此问题（下面还将进行演示）。

document.querySelector('form button').addEventListener('click', function() {
  console.log('from addEventListener handler: ', faul);
});

<script>
function faul() { alert("faul"); }
</script>

<form>
  <button onclick="console.log('from inline handler:', faul)">log faul</button>
  <button onclick="console.log(faul2)">log faul2</button>
  <input name="faul" required>
  <div id="faul2"></div>
</form>

表单内的命名元素如何干扰全局名称空间？

1 个答案: