解决跨浏览器DOM事件处理

古城微笑少年丶 2024-02-17 20:47 51阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <title>事件流</title>
            <meta charset="utf-8">   //若不写这行，IE浏览器会乱码，chrome不会，不清楚为什么，还没研究=。=
        </head>
        <body>
            <input type="button" value="按钮" id="btn1">
            <script type="text/javascript">
                var btn1=document.getElementById('btn1');
                function showMes(){
         
                    alert('hello world!');
                }
                var eventUtil={
                    //添加句柄
                    addHandler:function(element,type,handler){
         
                        if(element.addEventListener){   //DOM2级
                            element.addEventListener(type,handler,false);
                        }else if(element.attachEvent){  //IE事件处理
                            element.attachEvent('on'+type,handler);
                        }else{                          //DOM0级
                            element['on'+type]=handler;
                            //注意element['on'+type] === element.onclick()，当遇到这种方法名称不确定的时候用[]
                        }
                    },
                    //删除句柄
                    removeHandler:function(element,type,handler){
         
                        if(element.removeEventListener){    //DOM2级
                            element.removeEventListener(type,handler,false);
                        }else if(element.detachEvent){  //IE事件处理
                            element.detachEvent('on'+type,handler);
                        }else{                          //DOM0级
                            element['on'+type]=null;
                        }
                    }
                }
                eventUtil.addHandler(btn1,'click',showMes);
            </script>
        </body>
    </html>

参考：  
[http://www.imooc.com/video/2138][http_www.imooc.com_video_2138]

[http_www.imooc.com_video_2138]: http://www.imooc.com/video/2138