[HTML5]HTML5之JS事件处理

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的技术心得，有不正确的地方可以一起交流探讨