您的位置：首页 > Web前端 > JavaScript

JS 事件处理初探秘

2016-03-26 21:44 423 查看

<!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事件处理程序" onclick="showMessage()">

       <input id="btn2" type="button" value="Dom 0 级事件处理程序">

       <input id="btn3" type="button" value="Dom 2 级事件处理程序">

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 兼容事件处理

相关文章推荐

新的分享

章节导航