javascript 事件处理

来源：互联网发布：设计模式php 编辑：程序博客网时间：2024/05/01 12:45

事件处理的多种方式：

<!DOCTYPE html><html><head>    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>    <script type="text/javascript">        //跨浏览器的代码        var EventUtil = {            addHandler:function(element,type,handler){                if(element.addEventListener){                    element.addEventListener(type,handler,false);                }else if(element.attachEven){                    element.attachEvent("on"+type,handler);                }else{                    element["on"+type]=handler;                }            },            removeHandler:function(element,type,handler){                if(element.removeEventListener){                    element.removeEventListener(type,handler,false);                }else if(element.detachEvent){                    element.detachEvent("on"+type,handler);                }else{                    element["on"+type] = null;                }            }        }        //等待document对象加载完成        window.onload = function(){                var btn = document.getElementById("btn");                //添加事件处理程序//                btn.addEventListener("click",btnClick2,false);////                btn.addEventListener("click",btnClick3,false);////                //移除事件处理程序//                btn.removeEventListener("click",btnClick2,false);            //添加事件处理程序//            btn.onclick = btnClick1;            //添加事件处理程序            EventUtil.addHandler(btn,"click",btnClick2);            //移除事件处理程序            EventUtil.removeHandler(btn,"click",btnClick2);        }        //定义事件处理程序        function btnClick1(){            window.alert("btn click1");        }        function btnClick2(){            window.alert("btn Click2");        }        function btnClick3(){            window.alert("btn Click3");        }    </script></head><body><input type="button" value="btn" id="btn" onclick="btnClick1()"/></body></html>

一个函数处理多个事件，用到事件对象：

<!DOCTYPE html><html><head>    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>    <script type="text/javascript">        //等待document对象加载完成        window.onload = function(){            var btn = document.getElementById("btn");            btn.onclick = btnEventHandler;            btn.onmouseup=btnEventHandler;            btn.onmousedown = btnEventHandler;            btn.onmouseout = btnEventHandler;            btn.onmouseover = btnEventHandler;        }        //定义事件处理程序,一个函数处理多个事件        var btnEventHandler = function (event){            switch(event.type){                case "click":{                    window.alert(click);                    break;                }                case "mouseup":{                    window.alert("mouseup");                    break;                }                case "mousedown":{                   window.alert("mousedown");                    break;                }                case "mouserover":{                    window.alert("mouseover");                    break;                }                case "mouseout":{                    window.alert("mouseout");                    break;                }                default :break;            }        }    </script></head><body><input type="button" value="btn" id="btn" /></body></html>

0 0