【JS】事件处理

校验浏览器是否支持某事件:document.implementation.hasFeature("FocusEvent","3.0")

对HTML元素添加事件的方法有:

1、

<a onclick='xxxx()'></a>
<body onload='xxx()'>

2、

window.onload = function(){
  //do something  
}
document.getElementById("myBt").click=function(){
    //do something  
}

//------------------
var doClick = function(){
    //do something  
}
document.getElementById("myBt").click=doClick;

3、当需要添加的元素是动态的,则需要动态添加事件,但由于不同主流浏览器对动态添加事件支持的方法不一致,故需要检查浏览器的支持性

EventUtil.js

var EventUtil = {
  //绑定事件,注意type的值为非on开始的事件,例如:click而非onclick
    addHandler: 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;
        }
    },
    
    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;
            }
        }
    },
    //获取键盘的keypress事件中按键的code     getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    //获取剪贴板中的数据     getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //获取事件对象
    getEvent: function(event){
        return event ? event : window.event;
    },
    //鼠标移出后鼠标所在的焦点对象
    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;
        }
    
    },
    //获取激发事件的源对象
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //获取所有浏览器下鼠标滚轮滚动时的wheelDelta的值,向上则为120的正数+,向下则为120的正数-     getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    //取消事件的默认行为,例如<a href="www.xxx.com">如果在onclick时间中调用该方法则不会打开链接
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
  //移除绑定的事件
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    //设置剪贴板的数据     setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    //阻止事件的继续冒泡执行
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

调用方法:

var btn = document.getElementById("myBtn");
        var handler = function(){
            alert("Clicked");
        };
        EventUtil.addHandler(btn, "click", handler); 
        
        var removeBtn = document.getElementById("myRemoveBtn");
        EventUtil.addHandler(removeBtn, "click", function(){
            EventUtil.removeHandler(btn, "click", handler); 
        });

 

你可能感兴趣的:(js)