如何在按鈕單擊時運行功能？

Question

如果單擊按鈕，如何運行此功能？

<button id="button">Button</button>

var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();


tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);

Answer 1

按鈕上的 onclick 屬性將接受一個 JavaScript 函數在單擊時調用，如下所示：

<button id="button" type="button" onclick="functionToCall">Button</button>

<script>
  function functionToCall() {
     // ...
  }
</script>

但是，通常最好將 eventListener 附加到按鈕，如下所示：

<button id="button" type="button">Button</button>

<script>
    // Plain JS
    document.getElementById('button').addEventListener('click', function() {
      // ...
    });

    // jQuery
    $('#button').click(function() {
      // ...
    });
</script>

使用 onclick 屬性將覆蓋任何先前附加的偵聽器，並且在現代應用程序中，經常會看到與 DOM 節點關聯的多個事件處理程序。

使用 addEventListener 將確保先前附加的處理程序保持原樣並可以同時執行。

還有一個 removeEventListener 方法可用於在觸發事件時停止函數的執行，如果您只需要執行一次某事。 在這些情況下，通常使用命名函數而不是像我之前示例中的匿名函數。

document.getElementById("button").addEventListener("click", clickHandlerOnce);
function clickHandlerOnce() {
   // ...
   this.removeListener("click", clickHandlerOnce);
}

Answer 2

使用jQuery：

$('#button').click(function(){
   var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();
   tween.easing(TWEEN.Easing.Elastic.InOut);
   tween.repeat(Infinity);
   tween.yoyo(true);
   return false; //if you want the button to not process anything further
});

Answer 3

這里的問題是您希望能夠在單擊按鈕時運行 JavaScript 代碼。 解決這個問題的方法是創建一個函數，然后將按鈕的“onclick”屬性設置為函數的名稱。 像這樣：

<button id="button" onclick="functionName()">Button</button>

<script>
function functionName ()
{
var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);
}
</script>