Question

我有一个问题，为什么在某些情况下使用()调用函数而不是其他情况。以下面为例。单击按钮时，test()显式调用测试函数。

  <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <h1>Hello</h1>
        <input type="button" value="click" onclick="test()"/>
        <p id="p1">Test</p>

         <script>
          function test()
          {
            document.getElementById("p1").innerHTML = "Hello World";
          }
        </script>
      </body>
    </html>

见下面的示例：该函数未使用()调用（即不立即调用它）。它简称为test如果我将下面的函数更改为匿名函数，它也会起作用。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello</h1>
    <input id = "b1" type="button" value="click"/>
    <p id="p1">Test</p>
     <script>

      function test()
      {

        document.getElementById("p1").innerHTML = "Hello World";
      }
       var but = document.getElementById("b1");
       but.addEventListener("click", test, false);

    </script>
  </body>
</html>

在两个事件监听器（即on on click事件）的情况下，有一个原因，一个类型不需要函数调用的括号而另一个类型吗？

Answer 1

它与众不同。

执行yourFunction()时，您实际上正在调用此功能。

执行call(yourFunction)时，您将该函数作为参考传递，而不是执行它。它可能稍后作为回调执行，就像在事件监听器中一样。

将匿名函数传递给另一个函数（如

）也是如此

element.addEventListener('click', function(){});

匿名函数未被调用，它只作为对addEventListener函数内参数的引用传递。它后来被传递给它的函数执行。

您还可以使用yourFunction.call()和yourFunction.apply()来调用函数，这样您就可以在函数的上下文中更改this的含义。例如，jQuery传递事件目标。

这就是你被允许这样做的原因：

var yourFunction = function(){ alert('hey'); }

在这种情况下，yourFunction是function类型的变量，与您在具有function参数的函数内部相同。

然后你可以执行＆＃34;这个变量通过yourFunction()或我上面提到的方法，并将其作为参数传递。

Answer 2

内联JS

当您执行类似的内联 onclick 处理程序时，您将分配要运行的Javascript表达式。所以你需要执行这个功能。

表达式可以很容易onclick="test();alert(2)"，在这种情况下很明显需要调用函数，就像它是从javascript文件运行一样。

将功能绑定到点击事件

如果你用javascript附加click事件，你将绑定一个函数，所以你只需要传递函数对象。

var xyz = document.getElementById("btn");
xyz.addEventListener("test",handler);

addEventListener设置要绑定到事件的函数对象，以便在触发事件时执行。由于您指定的是函数对象而不是字符串表达式，因此不需要括号。实际上，如果添加它们，函数将立即执行，函数的返回值将绑定到事件。

JavaScript在事件处理程序上运行，并在执行时出现问题

2 个答案: