解决跨浏览器DOM事件处理_javascript 相同的dom 事件夸页面同步-优快云博客

本文介绍了一个简单的HTML页面示例，展示了如何使用不同浏览器兼容的方法为按钮添加点击事件处理程序。通过DOM2级、IE及DOM0级标准添加及移除事件监听器，并提供了一段JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>