Question

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

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

编辑：此外，区分输入复选框和文本字段可能并不重要，但这些功能都只适用于文本字段。

Answer 1

您可以使用捕捉和冒泡。请注意，对于focus和blur事件，需要捕获。或者，您可以使用focusin和focusout事件。

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

Answer 2

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

如果我是你，我会选择jQuery。但它在纯Javascript中是可行的。：）

Answer 3

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

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

Answer 4

您有几个问题：

onload是一个适用于window对象的事件处理程序。
您的事件处理函数需要您未传递的参数。例如，在您的标记中，您有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/

可以通过标签调用全局函数吗？

4 个答案: