JavaScript跨浏览器兼容之事件

Posted 2021-01-11 西塞山前白鹭飞

（不定期更新！！！）

说明：常见的事件跨浏览器兼容。

内容速览:

1. 添加事件处理函数    addHandler
2. 移除事件处理函数    removeHandler
3. 获取event对象         getEvent
4. 事件的目标              getTarget
5. 取消事件默认行为   preventDefault
6. 阻止事件冒泡          stopPropagation
7. 获取事件相关属性   getRelatedTarget
8. 获取鼠标按钮          getButton
9. 获取鼠标滚动时，显示保存有关鼠标信息的detail属性值    getWheelDelta
10. 获取字符编码         getCharCode

----------------------------------------------------------------------------------------我是华丽的分割线------------------------------------------------------------------------------------------------------------------------------------------------------------------

 //跨浏览器事件兼容对象
    var EventUtil = {
        //添加事件处理函数
        addHandler: function (element, type, handler) {

        },

        //移除事件处理函数
        removeHandler: function (element,type,handler) {

        },

        //获取event对象
        getEvent: function (event) {
            // event = event || window.event;
            return event ? event : window.event;
        },

        //获取事件的目标（例如触发事件的具体是鼠标事件还是滚动事件）
        getTarget: function (event) {
            return event.target || event.srcElement;
        },

        //取消事件的默认行为
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },

        //阻止事件冒泡
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();//阻止事件流
            } else {
                event.cancelBubble = true;//IE不支持事件捕获
            }
        },

        //获取相关属性
        getRelatedTarget: function (event) {
            if (event.relatedTarget) {
                return event.relatedTarget;
            
            } else if (event.toElement) {
                return event.toElement;
            
            } else if (event.fromElement) {
                return event.fromElement
            
            } else {
                return null;
            }
        },

        //获取鼠标按钮
        getButton: function (event) {
            if ( document.implementation.hasFeature ("MouseEvents" ,"2.0")) {
                return event.button;
            } else {
                switch (event.button) {
                    case 0: 
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4:
                        return 1;

                }
            }
        },

        //鼠标滚动时，显示保存有关鼠标信息的detail属性值
        getWheelDelta: function (event) {
            if ( event.wheelDelta) {
                //解决浏览器是否在Opera 9.5 之前版本的兼容性
                return (client.engine.opera && client.engine.opera < 9.5 
                        ? -event.wheelDelta 
                        : event.wheelDelta);
            } else {
                return -event.detail * 40;
            }
        },

        //获取字符编码
        getCharCode: function (event) {
            if (typeof event.charCode =="number") {
                return event.charCode;
            } else {
                return event.keyCode;
            }
        },
    }