从按钮调用警报函数，但不使用onclick

Calling an alert function from a button but without using onclick

本文关键字：onclick 函数 按钮 调用      更新时间：2023-09-26

我想做的是调用我的函数从每当有人点击我的按钮。然而，我知道这可以用

来完成
<button onclick="myFuntion()>

但是我想跳过这一步，我不想在我的按钮功能，我听说这是糟糕的编程。

但是，我的文件是这样的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>
<script>
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
    alert("Hello");
}
</script>
</head>
<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>
</body>
</html>

那么为什么它不弹出框"Hello"每当我按下按钮，我做错了什么?

你必须在加载HTML主体后调用你的testFunction，以便它实际创建绑定。

也就是说，在文件的末尾，您可以这样做:

...
<script>
   testFunction()
</script>
</body>
...

如果你在head脚本中运行绑定代码，button元素将不存在 —这就是为什么这个必须放在最后。

JavaScript库(如jQuery)通过提供ready钩子使这更加优雅，在那里，一旦页面完全加载，就可以调用代码，而不必诉诸于页面底部的代码。

以script结尾的完整示例(令人困惑的是，堆栈片段不会按照它们在片段中的实际顺序向您显示它;尽管看起来不像，但脚本在这里结束):

// Scoping function to avoid creating unnecessary globals
(function() {
  // The click handler
  function Hello() {
    alert("Hello");
  }
  // Hooking it up -- you *can* do it like you did:
  //document.getElementById("test").onclick = Hello;
  // ...but the modern way is to use addEventListener,
  // which allows for more than one handler:
  document.getElementById("test").addEventListener(
    "click", Hello, false
  );
})();
<button type="button" id="test">Click me</button>

window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
    alert("Hello");
}

始终运行testFunction中的行。如图所示:https://jsfiddle.net/arugco4b/

相关文章：