4

我的源代码中有许多类似于以下内容的实例:

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

每个输入标签都以那些onfocus, onkeydown, onkeyup, 和onblur函数调用结尾。

我想做的是全局指定所有输入标签在这些事件上调用这些函数。在 JavaScript 中可以做到这一点吗?

编辑:我尝试将它放在脚本部分中,并且没有调用我的任何函数:

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;
    }
  }

编辑:此外,区分输入复选框和文本字段可能并不重要,但这些功能都只与文本字段有关。

4

4 回答 4

1

您可以使用捕获和冒泡。请注意,对于焦点和模糊事件,需要捕获。或者,您可以使用 focusin 和 focusout 事件。

现场演示:http: //jsfiddle.net/t2KdS/

于 2011-11-25T14:26:30.567 回答
0

这真的是一个字的问题global scope。如果您的 JS 分散在多个文件中,则必须将上述答案的代码写入一个文件中,该文件在调用所有其他 JS 函数的主文件之前调用。

如果您有一个文件,请将这些行放在每个函数之外的顶部。这使得它在 JS 中是全局的。但在这种情况下建议使用 jQuery 方法,因为全局变量是崩溃的基本点。尽量避免使用它们

于 2011-11-25T12:43:32.350 回答
0

你有几个问题:

  1. onload是适用于window对象的事件处理程序。
  2. 您的事件处理函数需要一个您没有传递的参数。例如,在您的标记ThisOnBlur(this)中,但在您使用的代码中ThisOnBlur没有传递参数。

以下是我将如何更改您的代码:

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

createEventHandler函数使您能够获取对使用正确参数调用现有事件处理程序的函数的引用。

这是一个例子:http: //jsfiddle.net/YPNmd/

于 2011-11-25T15:08:34.120 回答
0

看看这里:http ://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

如果我是你,我会选择 jQuery。但它在纯 Javascript 中是可行的。:)

于 2011-11-25T12:36:49.857 回答