(006)dom_跨浏览器事件处理程序 

<html>
    <head>
    </head>
    <body>
        <div id="box">
            <input type="button" value="button" id="btn" onclick="showMsg()">
            <input type="button" value="dom0 button" id="btn2">
            <input type="button" value="dom2 button" id="btn3">
        </div>
        <script type="text/javascript">
            function showMsg() {
                alert("hello");
            }

            function dom2Event() {
                alert("this is dom2 click event");
            }

            var btn2 = document.getElementById("btn2");
            btn2.onclick = function() {
                alert("this is dom0 click event");
            };
            //btn2.onclick = null;

            //Chrome,Firefox下
            // var btn3 = document.getElementById("btn3");
            // btn3.addEventListener("click",dom2Event,false);
            //btn3.removeEventListener("click",dom2Event,false);

            //IE下
            // var btn3 = document.getElementById("btn3");
            // btn3.attachEvent("onclick",dom2Event);
            // btn3.detachEvent("onclick",dom2Event);

            var eventUtil = {
                addEventHandler: function(element,type,handler) {
                    if(element.addEventListener) {
                        element.addEventListener(type,handler,false);
                    }
                    else if(element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = handler;
                    }
                },

                removeEventHandler: 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;
                    }
                }

                
            };

            eventUtil.addEventHandler(btn3,"click",showMsg);
            eventUtil.removeEventHandler(btn3,"click",showMsg);

        </script>
    </body>
</html>

 

posted @ 2015-02-08 16:48  雪中飞雁  阅读(82)  评论(0)    收藏  举报