第一种方式:onclick属性,属性值为方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用JavaScript给HTML添加事件</title>
<script>
function test(){
console.log("HelloWorld");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="test()"/>
</body>
</html>
第二种方式:方法必须写在button之后,否则onclick属性识别不到。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用JavaScript给HTML添加事件</title>
</head>
<body>
<input type="button" value="按钮" id="button"/>
<script>
document.getElementById("button").onclick=function(){
console.log("HelloWorld");
}
</script>
</body>
</html>
第三种方式:添加addEventListener
方法,增加监听。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用JavaScript给HTML添加事件</title>
</head>
<body>
<input type="button" value="按钮" id="button"/>
<script>
document.getElementById("button").addEventListener("click",function(){
console.log("HelloWorld");
});
</script>
</body>
</html>