- HTML中使用onclick属性
- JS中使用onclick属性
- JS中使用addEvenListener()方法
三种方法的比较
在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。
语法细节
- 在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
- 在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
- 第一种方法调用的函数后需要括号，第二、三种不需要。
HTML中使用onclick属性
<html>
<head>
<title>方式一</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
</script>
</head>
<body>
<div id="demo" onclick="add()"></div>
</body>
</html>JS中使用onclick属性
<html>
<head>
<title>方式二</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
window.onload=function(){
var box=document.getElementById("demo");
box.onclick=add;
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>JS中使用addEvenListener()方法
<html>
<head>
<title>方式三</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
window.onload=function(){
var box=document.getElementById("demo");
box.addEventListener("click",add);
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>