<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type ="text/css">
div {
border:1px solid #0094ff;
width:50%;
padding:50px;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(function () {
//1 DOM 0级事件特点
//1.1相同domu、元素的相同属性 只能注册一个方法，如果注册多个，则会被后面的覆盖
// 本质原因：onclick等0级事件，本质就是dom对象的一个属性（方法类型）如果多次赋值，则会覆盖前面的
document.getElementById("btnO").onclick = function () {
alert("我是0级事件");
};
document.getElementById("btnO").onclick = function () {
alert("111111111111");
};
//1.2 使用的是事件冒泡：由内往外
document.getElementById("divFather").onclick = function () {
alert("divFather");
};
document.getElementById("divSon").onclick = function () {
alert("divSon");
};
//2 dom2级事件特点：
//2.1 注册的方式使用不一样
//2.2 注册事件方法时 可以选择 捕获阶段事件(true)，也可以选择冒泡阶段事件（false） 老式IE浏览器要加onclick
document.getElementById("btn2").attachEvent("onclick", test2);
document.getElementById("btn2").detachEvent(test2);//老式IE浏览器的移除方法IE7及IE7以下
document.getElementById("btn2").addEventListener("click", function () { alert("btn2"); }, true);
document.getElementById("div1").addEventListener("click", function () { alert("div1"); }, true);
document.getElementById("div2").addEventListener("click", function () { alert("div2"); }, true);
//2.3 2 级dom事件相同元素的相同事件 可以注册多个方法，而且可以动态移除指定方法
document.getElementById("btn2").addEventListener("click", test2, false);//如果要移除方法，注册方法必须要以这种方式
//移除方法
document.getElementById("btn2").removeEventListener("click",test2);
});
//JQ所有方法都是使用二级事件
function test2()
{
}
</script>
</head>
<body>
0级事件 会将 方法直接设置给dom对象对应的事件属性（如 ：onclick）
<div id="divFather" >
<div id="divSon">
<input type ="button" value ="Dom0级事件" id ="btnO"/>
</div>
</div>
2级事件 不会将方法设置给dom对象的事件属性，而是使用了另外一套机制来保存事件方法
<div id="div1" >
<div id="div2">
<input type ="button" value ="Dom0级事件" id ="btn2"/>
</div>
</div>
</body>
</html>
