JS事件处理：注册事件处理程序（个人喜欢把它看做函数调用）
三种方法
- HTML级别的处理（标签属性的方式）
- 0级处理（通过getElementById()的方式）
- 2级处理（通过getElementById()的方式）
1.HTML级别的处理
使用简单，也是最基础的HTML注册事件处理的方式
<div id="div">
<button id="button1" onclick="Begin()">按钮</button></div>
<!--修改一处需要修改两个地方-->
<script>
function Begin() {
alert("测试练习开始");
}
</script>
调用方式：通过Onclick找到相应Script响应事件进行处理
如果我需要修改事件名字，不仅在Script代码块里面要修改，还要修改对应的注册事件名称，实际项目开发中，事件处理是基础并且会有许多，所以这种级别的方式实际上很耗时间
2.0级处理
使用较为方便，通过getElementById()的方式，寻找到对应id进行事件处理
<script>
var but1 = document.getElementById("button1");
but1.onclick = function () {
alert("O级处理程序");//被覆盖掉
}
but1.onclick = function () {
alert("会不会处理呢");
}
//清除事件,不会执行输出
// but1.onclick = null;
</script>
调用方式：使用0级处理，程序首先通过 document.getElementById("button1")找到相对应的控件，然后通过but1.onclick = function () {}进行处理事件
0级处理事件.gif
如果同一个控件有多个事件处理，它会顺序覆盖它的事件，最终执行最后一次的事件。然而实际开发中，多个事件如果覆盖了，只执行一次，那么就没有必要让一个控件有多个处理事件了，那不是多此一举吗？
3.二级处理事件
使用方便，随时可以进行事件的调用，并且都会执行
<script>//不覆盖，一次处理所有事件
var but = document.getElementById("button1");
but.addEventListener("click",demo);
but.addEventListener("click",demo2);
function demo() {
alert("2级处理事件")
}
function demo2() {
alert("2级处理事件的另外的");
}
//移除事件 but.removeEventListener("click",demo);
</script>
调用方式：与0级处理事件方式相同
2级处理事件.gif
依次执行所有的处理事件，不进行覆盖，实用性强
注意：在我们需要对某些处理事件移除的时候使用removeEventListener("名称",处理事件名)将其对应的时间进行移除（注销）
最后通过这三个事件处理，可以完成IE浏览器版本适配的问题
火狐与IE浏览器.gif
<script>
var bt = document.getElementById("button1");
if(bt.addEventListener){
bt.addEventListener("click",text1)
}else if(bt.attachEvent){
bt.attachEvent("onclick",text1)
}else{
bt.onclick = text1();
}
function text1() {
alert("支持")
}
</script>
UP主留言：UP学习HTML5时间不长，这是UP主第一次提笔写关于HTML5的技术心得，有不正确的地方可以一起交流探讨
