有没有办法在 JavaScript 中编写事件处理程序而不将其添加到标签或使用 addEvent？答案

【问题标题】：Is there a way to write an event handler in JavaScript without adding it to the tag or using addEvent?有没有办法在 JavaScript 中编写事件处理程序而不将其添加到标签或使用 addEvent？
【发布时间】：2023-03-08 20:41:01
【问题描述】：

有没有办法在不使用 addEventListener 或 click="eventHandler()" 的情况下仅通过其在 JavaScript 中的 ID 向元素添加事件侦听器？我依稀记得一种使用元素 id 的方法。

例如，这里有两种方法可以为我不感兴趣的按钮添加事件侦听器：

<input id="myButton" type="button" onclick="doSomething()" />

这是另一个：

myButton.attatchEvent("click", doSomething());

我目前对以上两种方法不感兴趣。我正在寻找的是这样的：

function myButton_clickHandler(event) {
   alert("hello world");
}

在上面的代码中，浏览器知道该事件是针对“myButton”的。

我试图弄清楚这一点的原因是为了研究。我记得在 IE 中做过类似的事情。

更新

我做了更多研究，发现它可能是 Microsoft 唯一的一种功能集，在他们的文档中以“隐式事件处理程序”、“”的名称引用基于签名的处理程序”和“AutoEventWireup”。这些示例适用于 ASP.NET。

第一个例子：

为页面事件创建处理程序

在代码编辑器中，创建一个名为 Page_event 的方法。
例如，要为页面的 Load 事件创建处理程序，请创建一个名为 Page_Load 的方法。

注意：页面事件处理程序不需要像其他控件事件处理程序那样接受参数。

ASP.NET 页面自动将页面事件绑定到名为 Page_event 的方法。此自动绑定由 @Page 指令中的 AutoEventWireup 属性配置，默认设置为 true。如果将 AutoEventWireup 设置为 false，则页面不会自动搜索使用 Page_event 命名约定的方法。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Page.IsPostBack Then
        Response.Write("<br>Page has been posted back.")
    End If 
End Sub

第二个例子：

在 Visual Basic 中隐式添加事件处理程序

在代码编辑器中，创建具有适当签名的事件处理方法。该方法可以任意命名。
使用 Handles 关键字，指定方法应绑定到的控件和事件。

以下代码示例显示了名为 SampleButton 的按钮的 Click 事件的事件处理程序。示例中的方法名为 Clicked。

Protected Sub SampleButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles SampleButton.Click
    ' Code goes here. 
End Sub

来源：http://msdn.microsoft.com/en-us/library/6w2tb12s%28v=vs.90%29.aspx?cs-save-lang=1&cs-lang=vb#code-snippet-1

【问题讨论】：

我从来没有听说过 IE 的这种情况，仅函数名称就允许这样做，尽管您可以将函数分配给将被调用的属性。无论如何，这只是对可用方法的研究还是研究网站（可能是前者，但只是检查）？
我同意@Qantas94Heavy - 我从未听说过这样的事情。确定你不考虑 AS3？
很确定这不存在。 attatchEvent，也许？或者只是myButton.onclick = function(event) { ... }？
好吧，我不确定。但我记得我认为我不必添加事件侦听器很奇怪。我不考虑 AS3。 4 天后，它又回到了 Internet Explorer 中。
@DoorknobofSnow - 我用正确的方法名称更新了代码示例。

标签： javascript javascript-events

【解决方案1】：

为了回应您的评论，我编写了以下代码。对于每个带有下划线的函数，该函数会查找其 ID 与下划线之前的函数名称部分匹配的 DOM 元素，并将函数作为 onclick 处理程序提供给它。

(function() {
    var e, prop;
    for(prop in window) {
        if(prop.indexOf("_") < 0 || typeof window[prop] !== "function") continue;
        e = document.getElementById(prop.split("_")[0]);
        if(typeof e !== "undefined") {
            e.onclick = window[prop];
        }
    }
})();

粘贴上面的代码，你就可以做你在问题中描述的事情，即附加一个这样的事件：

function myButton_clickHandler(event) {
    alert("hello world");
}

myButton 是按钮的 ID。这只有在 ID 唯一的情况下才能正常工作。

【讨论】：

这可能会得到改进...你介意我发布一个答案来扩展这个吗？
不是特别的。我想看看你能想出什么。我也没有完善它。
干得好，伙计们。如果没有我认为可能存在的浏览器支持，这些将满足我的需求。

【解决方案2】：

要扩展 Elliot 的代码，这里有一个建议：

(function() {
    var prop, match, elem;
    for(prop in window) {
        if( typeof window[prop] !== "function") continue;
        if( match = prop.match(/^(.*)_([a-z]*)Handler$/)) {
            if( e = document.getElementById(match[1])) {
                if( "on"+match[2] in e) {
                    e["on"+match[2]] = window[prop];
                }
            }
        }
    }
})();

使用此代码，您可以像 Elliot 的回答那样拥有 function myButton_clickHandler，但您也可以附加其他事件，例如 myButton_focusHandler 代表 onfocus，或 someInput_changeHandler。更重要的是，它不会干扰您可能拥有的任何恰好有下划线的功能。它仅会查找名称中包含下划线且名称末尾带有Handler 的函数...即使这样，也仅在支持事件类型的情况下。

【讨论】：