由于浏览器版本的不同,考虑到兼容性的问题,js处理事件的方式也就不同。

DOM0事件
+ 直接通过 onclick 绑定到 html上的事件
+ 清除DOM0事件 直接给事件空值:  节点名.onclick=null;
+ 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数
+ 不存在兼容问题。
DOM2事件
+ 通过addEventlistener 绑定事件:addEventlistener(事件类型,执行函数,false)。
+ 清除DOM2事件 removeEventlistener(事件类型,执行函数,false)。
+ 同一个元素节点可以拥有多个事件功能。
+ 不兼容iE浏览器。
IE处理事件
+ 通过attachEvent 绑定事件:attachEvent(事件类型,执行函数)。
+ 清除IE事件 deatchEvent(事件类型,执行函数)。
+ 同一个元素节点可以拥有多个事件功能。
+ 不兼容火狐,谷歌等浏览器。
实战代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件兼容处理</title>
    <script type="text/javascript">
        //兼容火狐浏览器
        //addEventListener  添加事件
        //removeEventListener  删除事件
        //兼容ie
        //attachEvent    添加事件。
        //datechEvent    删除事件。
        //dom0
        //.添加事件
        //事件名=null。  取消事件。
    
    function showmeages(){
        alert("看你妹呢");
    }
    window.onload=function(){
        var btn=document.getElementById('btn1');
        var btnEvent={
            addEvent: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;
                }
            },
            removeEvent:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(element.deatchEvent){
                    element.deatchEvent('on'+type,handler);
                }else{
                    element['on'+type]=null;
                }
            }
        }
        btnEvent.addEvent(btn,'click',showmeages);
    }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
</body>
</html>
最后修改:2020 年 09 月 05 日 06 : 01 PM
如果觉得我的文章对你有用,请随意赞赏