javascript - JavaScript 中的保留函数名称

Question

重命名我的函数后，代码停止工作。新名称 scrollIntoView 似乎与 element.scrollIntoView() 冲突方法。

<div onmousedown="scrollIntoView('id001')"/>

function scrollIntoView(id) {
    alert(id);
}

我创建了一个简单的测试用例 https://jsfiddle.net/mgtn215y/这表明我的功能被简单地忽略了以支持 element.scrollIntoView() 甚至

• 不在元素上调用
• 属性不匹配

解决方案很明显 - 使用不同的函数名称。由于这种行为在主要浏览器中是一致的，我希望这在某处指定。但是，我找不到任何相关内容，例如JavaScript lexical grammar .这种行为有什么背景吗？

Answer 1

问题是从 HTML 源代码中声明的 HTML 元素属性值编译的函数的作用域链。 on_eventName=functionBodyCode 形式的属性表现出这种行为。

由于历史原因(DOM 以其当前形式不存在，document.getElementByID 尚未被发明...)此类函数使用包含对象的作用域链进行编译提供了事件处理程序属性、该元素所在的任何 form 元素以及 document 对象。 但是不同的浏览器在模拟 Netscape 行为时采用了不同的方法。一些浏览器包含了提供事件处理程序属性的元素的所有父对象，而另一些浏览器则省略了一些相关对象，例如 document。

技术细节可以在 O'Reilly 的“Javascript 权威指南”中找到，“19.1.6. 事件处理程序的范围”部分。

主要建议是避免在 HTML 中提供事件处理程序 - 而是使用 addEventListener 在 JavaScript 中添加它们。如果出于某种原因必须在 HTML 属性值中对函数调用进行编码，请避免使用作为 DOM 对象方法的函数名称。

请注意，事件处理程序的自定义作用域链仅适用于从 HTML 属性生成的函数。它不适用于在 JavaScript 中创建并使用 addEventListener 或 element.onEventName=aFunctionObject 添加到元素的函数。

---

以下代码片段演示了在 HTML 中定义的事件处理程序范围链中定位外部元素的属性名称:

<form name="formName1" action="">
<p> Try to access the elements collection of the form:
   <button type="button"
      onclick="console.log( elements);">elements
   </button>
</p>

</form>
<form name="formName2" action="" onsubmit="return false">
<p> Try to access form name as form.name:
  <button type="button"
     onclick="console.log( 'form.name: %s', form.name);">form.name
  </button>
</p>
</form>

<form name="formName3" action="" onsubmit="return false">
<p>Access document.write as "write"
   <button type="button"
      onclick="console.log( 'write: %s', write);">write
   </button>
</p>
</form>

• 在第一个表单中，elements 是周围表单元素的属性。

• 在第二种形式中，form 是 HTMLButtonElement 的一个属性。

• 在第三种形式中，write是document的一个方法。

• 引用 2020 年，HTML5 在 internal raw uncompiled handler 的编号列表项 3.9 中的“范围”下将 HTML 属性处理程序的范围链指定为“元素 > 外部形式元素 > 文档”。 .