有没有一种方法可以在JavaScript中编写事件处理程序，而无需将其添加到标记中或使用addEvent？

Question

Is there a way to add an event listener to an element only by it's ID in JavaScript without using addEventListener or click="eventHandler()"? I vaguely remember a way to do it using the id of the element.

For example, here are two ways to add an event listener for a button that I'm not interested in:

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

Here is another:

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

I'm not interested in the above two methods at this time. What I'm looking for is something like:

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

In the code above the browser knows that the event is for "myButton".

The reason I'm trying to figure this out is for research. I remember doing something like this in IE.

---

UPDATE

---

I did some more research and I found out that it may be a Microsoft only type of feature set referred to throughout their documentation by the names of, " implicit event handler ", " signature based handlers " and " AutoEventWireup ". These examples are for ASP.NET.

---

First example:

To create a handler for page events

1. In the code editor, create a method with the name Page_event.

2. For example, to create a handler for the page's Load event, create a method named Page_Load.

Note: Page event handlers are not required to take parameters the way that other controls event handlers are.

ASP.NET pages automatically bind page events to methods that have the name Page_event. This automatic binding is configured by the AutoEventWireup attribute in the @ Page directive, which is set to true by default. If you set AutoEventWireup to false, the page does not automatically search for methods that use the Page_event naming convention.

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

---

Second example:

To add an event handler implicitly in Visual Basic

1. In the code editor, create an event-handling method with the appropriate signature. The method can be named anything you like.

2. Use the Handles keyword, specifying the control and event to which the method should bind.

The following code example shows an event handler for the Click event of a button named SampleButton. The method in the example is named Clicked.

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

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

Answer 1

In response to your comment, I've written up the below code. For each function with an underscore present, the function finds the DOM element whose ID matches the section of the function name before the underscore, and gives the function to it as an onclick handler.

(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];
        }
    }
})();

Paste the above code in, and you'll be able to do what you described in your question, ie attach an event like this:

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

Where myButton is the ID of your button. This will only work properly if the ID is unique.

Answer 2

To expand on Elliot's code, here's a suggestion:

(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];
                }
            }
        }
    }
})();

With this code, you can have function myButton_clickHandler as in Elliot's answer, but you can also attach other events, such as myButton_focusHandler for onfocus , or someInput_changeHandler . More importantly, it won't interfere with any functions you might have that happen to have an underscore in them. It will only look for functions with names that contain an underscore and have Handler at the end of the name... and even then only if the event type is supported.