事件处理程序-跨浏览器@慕课网原创_慕课网

事件处理程序：其实就是dom节点的用户操作动作，例如onclick、onmouseover、onblur等。
事件处理程序有三种方式：
1、HTML方式，直接在html的dom节点上面添加事件属性。
例如：<input type="button" onclick="xxx()">.
这种方式用的较少，因为有两个缺点：A、事件与html的文档结构耦合比较高，增加了维护的工作量；B、不能为一个事件添加多个处理函数
2、DOM0级事件处理程序：这种方式用的比较多。
例如：
添加事件：nodeObject.onclick=function(){};
删除事件：nodeObject.onclick=null;
3、DOM2级事件处理程序：这种方式存在浏览器兼容性问题
IE中写法：
添加事件：nodeObject.attachEvent("onclick",function(){xxx});
移除事件：nodeObject.detachEvent("onclick",function(){xxx});
其他浏览器写法：
添加事件：nodeObject.addEventListener('click',function(){},false);
移除事件：nodeObject.removeEventListener('click',function(){},false);

对于事件处理程序我们一般建议自己进行封装，兼容跨浏览器的问题。
var eventUtil = {
addEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.addEventListener){//非IE情况下，使用addEventListener
element.addEventListener(eventType,fn,false);
}else if(element.attachEvent){//IE情况下，使用attachEvent
element.attachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = fn;
}
},
removeEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.removeEventListener){//非IE情况下，使用removeEventListener
element.removeEventListener(eventType,fn,false);
}else if(element.detachEvent){//IE情况下，使用detachEvent
element.detachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = null;
}
}
};
详见代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理跨浏览器</title>

</head>
<body>
    <input type="button" id="btn1" value="HTML事件处理程序" onclick="showMessage()">
    <input type="button" id="btn2" value="DOM0级事件处理程序">
    <input type="button" id="btn3" value="DOM2级事件处理程序">
    <script type="text/javascript">
        function showMessage(){
            alert("通过html中input的onclick属性调运");
        }
        function showMessage1(){
            alert("通过兼容方法调运onclick的第一个函数");
        }
        function showMessage2(){
            alert("通过兼容方法调运onclick的第二个函数");
        }
        //下面通过DOM0级处理
        var btn2 = document.getElementById('btn2');
        btn2.onclick = function(){
            alert("通过btn2的nodeObject添加onclick属性");
        };

        /**
         * 下面封装DOM事件处理的兼容性代码
         * [eventUtil description]
         * @type {Object}
         */
        var eventUtil = {
            addEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
                if(element.addEventListener){//非IE情况下，使用addEventListener
                    element.addEventListener(eventType,fn,false);
                }else if(element.attachEvent){//IE情况下，使用attachEvent
                    element.attachEvent('on'+eventType,fn);
                }else{//不支持DOM2级情况下，使用DOM0级的方式
                    element['on'+eventType] = fn;
                }
            },
            removeEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
                if(element.removeEventListener){//非IE情况下，使用removeEventListener
                    element.removeEventListener(eventType,fn,false);
                }else if(element.detachEvent){//IE情况下，使用detachEvent
                    element.detachEvent('on'+eventType,fn);
                }else{//不支持DOM2级情况下，使用DOM0级的方式
                    element['on'+eventType] = null;
                }
            }
        };

        var btn3 = document.getElementById('btn3');
        eventUtil.addEventHandle(btn3,'click',showMessage1);
        eventUtil.addEventHandle(btn3,'click',showMessage2);

        /*eventUtil.removeEventHandle(btn3,'click',showMessage1);
        eventUtil.removeEventHandle(btn3,'click',showMessage2);*/
    </script>
</body>
</html>

事件处理程序-跨浏览器原创