如何在按钮点击时运行一个函数？

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);

- Arthur S.

---

你尝试过访问 https://www.google.com/search?q=how+to+run+a+function+on+button+click 吗？该网页提供了关于如何在点击按钮时运行函数的信息。 - Javier Conde

Answer 1

点击我 当您点击上面的按钮时，将调用名为"myFunction"的JavaScript函数。

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

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

然而，通常最好将事件监听器附加到按钮上，如下所示：

但是：

<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);
}

- jeffjenx

Answer 2

这里的问题是您想在点击按钮时运行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>

- Bimde

Answer 3

使用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
});

- fanfavorite