解决跨浏览器DOM事件处理

最新推荐文章于 2024-08-27 09:08:32 发布

virusos

最新推荐文章于 2024-08-27 09:08:32 发布

阅读量319

点赞数

分类专栏：前端学习随便记一下文章标签： dom 前端浏览器 chrome ie

随便记一下同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端学习

10 篇文章 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

virusos

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决跨浏览器DOM事件处理

<!DOCTYPE html><html> <head> <title>事件流</title> <meta charset="utf-8"> </head> <body> <input type="button" value="按钮" id="btn1"> <script type="text/javascri
复制链接

扫一扫

专栏目录