<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>DOM事件</title>
</head>
<body>
<!-- 此为HTML事件，因为在HTML代码中 添加了onclick代码 -->
<input type="button" value="按钮1" id="btn1" onclick="fun1()" />
<script type="text/javascript">
function fun1(){
alert("hello world!");
}
</script> <!-- 此为DOM0级事件，不在HTML代码中添加事件，通过属性添加事件 -->
<input type="button" value="按钮2" id="btn2" >
<script type="text/javascript">
//1.第一步首先获取元素
var p=document.getElementById("btn2");
//2.第二步通过属性添加时间的函数
p.onclick=function (){
alert("这是DOM0级事件");
}
//3.通过此语句可以删除事件
//p.onclick=null;//此为删除事件
</script> <!--此为DOM2级事件，同样不在HTML代码中添加时间，用函数添加事件-->
<input type="button" value="按钮3" id="btn3">
<script type="text/javascript">
//1.第一步首先获取元素
var x=document.getElementById("btn3");
//2.第二步通过创建函数
function fun3(){
alert("这是DOM2级事件");
}
//然后通过函数 ↓事件 ↓函数名 ↓ture表示按捕获事件
// false按冒泡事件，
x.addEventListener("click", fun3, false);//false兼容个浏览器
//注意时间其实为onclick，但是DOM2级不能加on，只写后面就可以了。
</script> <!--
三种事件的比较，DOM2级事件相比于HTML事件更容日后期维护
-->
</body>
</html>