onclick()函数可以与调用它的元素名称不同吗？

Question

所以我有这个按钮元素会拒绝激活它的onclick()函数,无论我做了什么,它让我疯了一会儿:

<button type="button" id="newTreatment" name="newTreatment" onclick="newTreatment()" >Add a treatment</button>

我最后只是更改了函数的名称,它立即起作用:

<button type="button" id="newTreatment" name="newTreatment" onclick="addTreatment()" >Add a treatment</button>

从那时起我就在其他几个按钮上进行了测试,我一直都有类似的问题.

这是真的发生了什么？如果是元素,onclick()函数不能与id同名？这是为什么？我试过在线寻找这个,但我找不到任何有关它的信息.

Answer 1

假设你的元素包含在a中form,这是因为命名元素被添加为属性form.

当你试图打电话时newTreatement,newTreatment那个范围内已存在一个属性.它以为你指的是该属性,并给你一个错误

newTreatment不是一个功能

请参阅为什么JS函数名称与元素ID冲突？和带有id的DOM树元素成为全局变量吗？

Answer 2

内联事件处理程序很神奇（即不直观）。

封闭元素的属性在内<form>联事件处理程序的范围内。并且由于每个表单控件元素的名称成为表单元素的属性，因此在事件处理程序中使用这样的名称将改为引用该元素。

内联事件处理程序的作用域链大致是：

Global scope / properties of window
^
|
Properties of document (e.g. body)
^
|
Properties of enclosing form (e.g. newTreatment or submit)
^
|
Properties of <button id="newTreatment" /> (e.g. type, onclick)
^
|
Function scope of inline event handler

更近范围（例如表单）中的绑定会影响更高范围（例如全局范围）中的绑定。

一个简单的解决方案是通过 显式引用全局变量window.newTreatment。

我在这里更详细地描述了这一点。

这似乎在 HTML5 规范中正式化了。