从HTML表单字段调用JavaScript函数

Question

When calling a JavaScript function what does the return value do to an input form field? For example:

<script type="text/javascript">
 function foo()
 {
  return true;
 }
</script>
<input type="text" id="txt1" onkeyup="return foo()" />

and variations, IIRC onkeyup="foo(); return false"
I don't really need a return time, what's the easiest way to do this?

Right now I'm trying to call multiple functions from one event and not sure what the appropriate way is: <input type="text" id="txt1" onkeyup="return foo1(); return foo2();" or
<input type="text" id="txt1" onkeyup="return foo1()" onkeyup="return foo2();"

Answer 1

return false; is used to stop the event from having its default effect (in this case, the letter typed from being added). return foo() is used so that foo can be the judge of whether to return true or return false and therefore whether or not the default action should happen.

If you are just calling a function that won't affect whether or not the event actually takes place, just use onkeyup="foo1(); foo2();" . If, however, one of them affects the outcome, it should be called last and have a return before it.

In general, though, it's easier to have a single function in there, say onkeyup="return foo()" , and then have

function foo() {
    foo1();
    foo2();
    return true; // or whatever
}

Answer 2

The most appropriate way is to bind multiple functions to one event like so:

ELEMENT.addEventListener('onkeyup', function(event) {
    foo();
    bar();
    fooBar();
}, false);

Or to simplify it even further you could use jQuery:

$(element).on({
    keyup: function() {
        foo();
        bar();
        fooBar();
    }
});

*Hint: use this (in jquery) or event.target (non-jquery) to work with the event source.

Answer 3

Ideally you shouldnt be putting them inline AT ALL... you should be using event handlers attached to the dom elements.

for example:

document.getElementById('txt1').addEventListener('onkeyup', function() {
   foo1();
   foo2();
});

Now the caveat here is that event assignment isnt necessarily normalized so you need to attach listeners in different ways in different browsers. This is one of the reasons people use libraries like jQuery - it normalizes all this.