Global function calls by tag possible?

Question

I have many instances similar to the following in my source code:

<input id="a" type="text" name="a" maxlength="40"
 onfocus="ThisOnFocus(this)" onkeydown="ThisOnKeyDown(this)" onkeyup="ThisOnKeyUp(this)" onblur="ThisOnBlur(this)"/>

Every input tag ends with those onfocus, onkeydown, onkeyup, and onblur function calls.

What I'd like to do is specify globally that all input tags call those functions on those events. Is that something that's possible to do in JavaScript?

Edit: I have tried placing this in the script section and none of my functions are being called:

document.onload = function() { var inputs = document.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
    inputs[i].onfocus = ThisOnFocus;
    inputs[i].onblur = ThisOnBlur;
    inputs[i].onkeyup = ThisOnKeyUp;
    inputs[i].onkeydown = ThisOnKeyDown;
    }
  }

Edit: Also, it may not be important to distinguish between input checkboxes and textfields, but these functions all pertain to just the textfields.

score 1 · Answer 1 · answered Nov 25 '11 at 14:26

1

You can use capturing and bubbling. Note that for the focus and blur event, capturing is required. Alternatively, you can use the focusin and focusout events.

Live demo: http://jsfiddle.net/t2KdS/

answered Nov 25 '11 at 14:26

Francis

3,335
20
46

score 0 · Answer 2 · answered Nov 25 '11 at 12:36

0

Have a look here: http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

If I were you, I'd select jQuery. But it is do-able in pure Javascript. :)

answered Nov 25 '11 at 12:36

Pateman

2,727
3
28
43

score 0 · Answer 3 · answered Nov 25 '11 at 12:43

It really is a matter of the word global scope. If your JS is scattered across multiple files, you would have to write the above answers' code in a file that is called before the main file which calls every other JS functions.

If you have one file, place those lines at the top outside every function. That makes it global in JS. But it is suggestable to use jQuery approach in that case, since global variables are a fundamental point of crash. Refrain from using them as much as possible

score 0 · Accepted Answer · answered Nov 25 '11 at 15:08

You have several issues:

onload is an event handler that is applicable to the window object.
Your event-handling functions are expecting a parameter that you aren't passing. In your markup you have ThisOnBlur(this) for example, but in the code you're just using ThisOnBlur without passing an argument.

Here's how I would change your code:

function createEventHandler(fn, input) {
    return function () {
        fn(input);
    };
}

window.onload = function() {
    var inputs = document.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
        inputs[i].onfocus = createEventHandler(
            ThisOnFocus, inputs[i]);

        inputs[i].onblur = createEventHandler(
            ThisOnBlur, inputs[i]);

        inputs[i].onkeydown = createEventHandler(
            ThisOnKeyDown, inputs[i]);

        inputs[i].onkeyup = createEventHandler(
            ThisOnKeyUp, inputs[i]);
    }
};

The createEventHandler function enables you to get a reference to a function that calls your existing event handlers with the correct arguments.

Here's an example: http://jsfiddle.net/YPNmd/

Just to warn others, clicking in one of those textfields causes an infinite loop. — Michael Swarts, Nov 26 '11 at 15:27
I ended up getting this to work using body onload. It wouldn't work otherwise. But this answer got me there. Thanks! — Michael Swarts, Nov 26 '11 at 16:32
@Mike: Glad it helped, although it should work in the `` inside a `` tag of your HTML document too... — Andrew Whitaker, Nov 26 '11 at 18:29

Global function calls by tag possible?

4 Answers4