当CSS ID覆盖它们时，访问在全局范围内定义的js函数

如何解决当CSS ID覆盖它们时，访问在全局范围内定义的js函数

给出此html文档：

<script>
 const testfn = (e) => {
   e.preventDefault();
   console.log(e);
 }
</script>
<form onsubmit='testfn(event)'>
    <input id='testfn'>
    <button type='submit'>submit</button>
</form>

如何使用脚本标记中定义的testfn事件处理程序？

（onsubmit处理程序中的范围内testfn是输入元素，因为它具有匹配的ID）

---

编辑：

虽然有趣的是，仅当此问题以某种形式出现并且

1. 具有id的元素是input元素
2. 带有附加事件处理程序的元素也是input类的元素：输入，按钮或表单的onsubmit

鉴于这就是可能的方式，也许对于体育运动，更好的问题是：有什么方法仍然可以从输入的onsubmit / click属性访问javascript函数？

解决方法

有两种基本的解决方法。

请勿使用内部事件属性

正如您所发现的那样，它们确实将讨厌的事情范围化了。将事件处理程序与JS绑定。

document.querySelector("form").addEventListener("submit",testfn);

通过window对象访问全局

为此，首先必须将函数附加到window对象。用var而不是const声明它。

var testfn = etc;

然后您可以访问：

onsubmit="window.testfn(event)"

---

我建议采用前一种方法。

---

可笑的是，此问题仅在以某种形式发生时才会发生

这是由于多种因素造成的。内在事件属性搜索它们所绑定的事件的属性，然后将具有ID的控件放入表单中，从而在与ID匹配的表单上为该元素提供访问器属性。

因此<form onsubmit='testfn(event)'>最终访问了theForm.testfn这是输入。