JS 事件处理初探秘

最新推荐文章于 2024-07-26 20:46:33 发布

_小明同学__

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量249

点赞数

分类专栏： javascript基础总结文章标签： javascript 兼容事件处理

本文链接：https://blog.csdn.net/zhimeng567/article/details/50989076

版权

javascript基础总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>事件处理程序初探秘</title>
       <script>
           window.onload = function(){
               //Dom 0 级事件处理程序
               var btn2 = document.getElementById("btn2");
               btn2.onclick = showMessage0;
               //DOM 2 级事件处理程序
               var btn3 = document.getElementById("btn3");
               btn3.addEventListener("click", showMessage2, false);
               //IE 事件处理程序
               // btn3.attachEvent("onclick", showMessage2);
               //兼容
               //eventUtil.addCallback(btn3, "click", showMessage2);
           }

           //HTML事件处理回调
           function showMessage(){
               alert("HTML事件处理程序");
           }
           //Dom 0 级事件处理回调
           function showMessage0(){
               alert("Dom 0 级事件处理程序");
           }
           //Dom 2 级事件处理回调
           function showMessage2(){
               alert("Dom 2 级事件处理程序");
           }
           //创建一个对象兼容各版本浏览器
           var eventUtil = {
               addCallback : function(oElement, type, callback){
                   if(oElement.addEventListener){
                       oElement.addEventListener(type, callback, false);
                   }else if(oElement.attachEvent){
                       oElement.attachEvent("on"+type, callback);
                   }else{
                       oElement["on"+type] = callback;
                   }
               },
               removeCallback : function(oElement, type, callback){
                   if(oElement.removeEventListener){
                       oElement.removeEventListener(type, callback, false);
                   }else if(oElement.detachEvent){
                       oElement.detachEvent("on"+type, callback);
                   }else{
                       oElement["on"+type] = null;
                   }
               }
           }
       </script>
   </head>
   <body>
       <input id="btn1" type="button" value="HTML事件处理程序" οnclick="showMessage()">
       <input id="btn2" type="button" value="Dom 0 级事件处理程序">
       <input id="btn3" type="button" value="Dom 2 级事件处理程序">
   </body>
</html>