如何在按钮单击时运行功能？

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>