事件處理程序上的JavaScript函數和執行問題

Question

我有一個問題，為什么在某些情況下而不是在某些情況下用()調用函數。 以下面為例。 單擊按鈕時， test()將顯式調用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 click事件），為什么一種類型不需要在函數調用上加上括號，而另一種卻需要括號？

Answer 1

這不一樣。

當執行yourFunction() ，實際上是在調用該函數。

當您call(yourFunction) ，您call(yourFunction)函數作為引用傳遞，而不執行它。 稍后可能會像事件監聽器一樣將其作為回調執行。

與將匿名函數傳遞給另一個函數相同，例如

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

不會調用匿名函數，它僅作為對addEventListener函數內部參數的引用進行傳遞。 稍后由傳遞給它的函數執行。

您也可以撥打使用函數yourFunction.call()和yourFunction.apply()它允許您更改的意義this函數的上下文中。 例如，jQuery傳遞了事件目標。

這就是為什么您可以這樣做的原因：

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

在這種情況下， yourFunction是function類型的變量，這與在具有function參數的函數中獲得的變量相同。

然后，您可以通過yourFunction()或我上面提到的方法“執行”此變量，並將其作為參數傳遞。

Answer 2

內聯JS

當您執行這樣的內聯onclick處理程序時，您正在分配要運行的Javascript表達式。 因此，您需要執行該功能。

該表達式可以很容易地成為onclick="test();alert(2)"在這種情況下，很明顯需要調用該函數，就像從JavaScript文件運行該函數一樣。

將功能綁定到click事件

相反，如果您使用javascript附加click事件，則將綁定一個函數，因此您只需要傳遞該函數對象即可。

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

addEventListener設置要綁定到事件的函數對象，以便在觸發事件時執行該對象。 由於指定的是函數對象，而不是字符串表達式，因此不需要括號。 實際上，如果添加它們，該函數將立即執行，並且該函數的返回值將綁定到該事件。

事件處理程序上的JavaScript函數和執行問題

問題描述

2 個解決方案

解決方案1
1 已采納 2018-04-17 16:37:10

解決方案2
1 2018-04-17 16:53:42

事件處理程序上的JavaScript函數和執行問題

問題描述

2 個解決方案

解決方案1 1 已采納 2018-04-17 16:37:10

解決方案2 1 2018-04-17 16:53:42

解決方案1
1 已采納 2018-04-17 16:37:10

解決方案2
1 2018-04-17 16:53:42