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

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