可以通过标记调用全局函数

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

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

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

Answer 2

你有几个问题:

1. 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/

Answer 3

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

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

Answer 4

这真的是global scope这个词的问题。如果你的JS分散在多个文件中，你将不得不在一个文件中编写上述答案的代码，该代码在调用所有其他JS函数的主文件之前调用。

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