错误代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="clickBtn()">按钮</button>
</body>
</html>
<script>
window.onload = function(){
function clickBtn(){
console.log("点击了");
}
}
</script>
如上面代码。onclick函数不能写在window.onload = function(){}里，运行没有效果。
控制台报"Uncaught ReferenceError: clickBtn is not defined"错误。
错误原因
查了一下，是作用域的问题。放在window.onload里面改变了clickBtn()函数的做用域，使其成为内部函数，所以onclick=""没法访问到这个函数
更改方式一：
而放到外面clickBtn()是绑定在window上的，因此onclick=""可以访问到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="clickBtn()">按钮</button>
</body>
</html>
<script>
window.onload = function() {
}
function clickBtn() {
console.log("点击了");
}
</script>
如果就想在页面加载完成以后再执行函数，可用下面方式：
更改方式二，采用对象.函数，将onload()里面函数的作用域绑定在window上：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="clickBtn()">按钮</button>
</body>
</html>
<script>
window.onload = function() {
var btn = document.getElementById("btn");
btn.clickBtn = function(){
console.log("点击了");
}
}
</script>
更改方式三，添加事件监听器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
<script>
window.onload = function() {
function clickBtn(){
console.log("点击了");
}
var btn = document.getElementById("btn");
btn.addEventListener("click",clickBtn);
}
</script>
同理，像鼠标移入、移出等这些人为触发的函数，也不能直接写在window.onload = function(){}里
用法同上
网友评论