HTML事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button onclick="demo()">按钮</button>
<script>
function demo(){
alert("html事件处理");//缺点是修改一处就要修改两处
}
</script>
</body>
</html>
DOM 0级事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<div>
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = demo; //DOM 0级事件处理
btn.onclick = demo2; //有个弊端是后面的语句会覆盖前面的语句，这里只弹demo2窗。
function demo(){
alert("DOM 0级事件处理");
}
function demo2(){
alert("DOM 0级事件处理2");
}
</script>
</body>
</html>
DOM 2级事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<div>
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",demo); //添加DOM 2级事件
btn.addEventListener("click",demo2); //相对DOM 0级事件的优点是不会覆盖上面的事件，依次弹窗两次
btn.removeEventListener("click",demo); //清除DOM 2级事件 function demo(){
alert("DOM 2级事件处理");
}
function demo2(){
alert("DOM 2级事件处理2");
} </script>
</body>
</html>