我试图做的是从有人点击我的按钮时调用我的功能.但是,我知道它可以完成
<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"框,我做错了什么？
您必须testFunction在加载HTML主体后调用您的实体,以便它实际创建绑定.
也就是说,在文件的末尾,您可以执行以下操作:
...
<script>
testFunction()
</script>
</body>
...
如果在head脚本中运行该绑定代码,则该button元素将不存在 - 这就是为什么必须在最后.
诸如jQuery之类的JavaScript库通过提供一个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>| 归档时间： |
|
| 查看次数： |
1509 次 |
| 最近记录： |