Question

我有JS代码来显示每个元素焦点的消息。请参阅代码段。

<html>
    <head>
        <title>JS</title>
    </head>
    <body>
        <p id="help">Helpful notes will appear here</p>
        <p>E-mail: <input type="text" id="email" name="email"></p>
        <p>Name: <input type="text" id="name" name="name"></p>
        <p>Age: <input type="text" id="age" name="age"></p>
    </body>
    <script type="text/javascript" >
        function showHelp(help) {
            var myFunc = function () {
                document.getElementById('help').innerHTML = help;
            }
            return myFunc;
        }
        function setupHelp() {
            var helpText = [
                {'id': 'age', 'help': 'Your age (you must be over 16)'},
                {'id': 'email', 'help': 'Your e-mail address'},
                {'id': 'name', 'help': 'Your full name'}
            ];
            for (var i = 0; i < helpText.length; i++) {
                var item = helpText[i];
                document.getElementById(item.id).onfocus = showHelp(item.help);

            }
        }
        setupHelp();
    </script>
</html>

当焦点在每个输入元素上时，会显示正确的消息，并且它正在按预期工作。但是当我将代码更改为

时

document.getElementById(item.id).onfocus = function () {
 return showHelp(item.help);
}

然后消息没有显示。两个有什么区别？

Answer 1

为了回答你在评论中提到的最后一个问题，你给onfocus的第二个例子分配了一个函数，它返回一个函数inturn。元素生成的onfocus事件会触发函数调用。您为onfocus事件提供的功能只是一个处理程序。不会对您返回的对象或功能执行任何操作。这是一个简单的例子，可以让您更好地理解。

＆＃13;

<html>
  <body>
    <input type="text" id="email" name="email">
  </body>
  <script type="text/javascript" >
      function showHelp() {
          console.log('showHelp');
      }
      document.getElementById('email').onfocus = function () {
       console.log('onfocus');
       return showHelp();
     }
  </script>
</html>

＆＃13;

当您运行上面的代码时，您只会看到在控制台上打印onfocus但从未在showHelp()函数中显示日志。

Javascript函数，返回函数说明

1 个答案: