EventUtil 跨浏览器事件处理对象

﹏ヽ暗。殇╰゛Y 2022-08-09 14:55 128阅读 0赞

/** * Created by chen on 2015/10/28. */
    var EventUtil = {
        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;
            }
        },
        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;
            }   
        }
    };
    
    //避免多次提交表单
    EventUtil.addHandler(form,"submit",function(event){ 
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
    
        //取得提交按钮
        var btn = target.elements['submit-btn'];
    
        //禁用它
        btn.disabled = true;
    });
    
    //调用focus（）方法
    EventUtil.addHanler(window,"load",function(event){ 
        ducument.form[0].elements[0].focus();//获取第一个表单元素中的第一个元素的焦点事件
    });
    
    //html5 新增了autofocus属性，会自动将焦点移动到该字段‘
    //<input type ="text" autofocus= true>
    
    //共有的表单字段事件
    /* blur ： 当前字段市区焦点时出发 change : 对于input和textArea，在他们失去焦点且value值改变时出发；对于select，在气旋想改变时触发 focus ：当前字段获得焦点时触发 */
    
    var textbox = document.createElement('button');
    textbox.value = "hello,world!";
    textbox.setSelectionRange(0,textbox.value.length);//第一个参数是文本起始位置，第二个是结尾位置 即表示获取文本的范围
    
    //表单序列化
    function serialize(form){ 
        var parts = [];
        field = null,
        i,j,len,option,optLen,optValue;
    
        for(i = 0, len = form.elements.length ; i<len;i++){
           field = form.elements[i];
            switch (field.type){
                case "select-one":
                case "select-multiple":
    
                    if(field.name.length){
                        for(j = 0,optLen = feild.options.length; j < optLen; j++){
                            option = feild.options[j];
                            if(option.selected){
                                optValue = "";
                                if(option.hasAttribute){
                                    optValue = (option.hasAttribute("value")? option.value: option.text);
                                }else{
                                    optValue = (option.hasAttributes["value"].specified? option.value:option.text);
                                }
                                parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
                            }
                        }
    
                    }
                    break;
                case undefined:  //字段量
                case "file": //文件输入
                case "submit": //提交按钮
                case "reset": //重置按钮
                case "button": //自定义按钮
                    break;
                case "radio" : //单选按钮
                case "checkbox": //复选框
                    if(!field.checked){
                        break;
                    }
                default:
                    //不包含没有名字的表单字段
                    if(field.name.length){
                        parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
                    }
            }
        }
        return parts.join("&");
    }
    
    
    
    //假设有一个ID为“droptarget”的<div>元素，可以用如下代码将它变成一个放置目标
    var droptarget = document.getElementById("droptarget");
    EventUtil.addHandler(droptarget,"dropover",function(event){ 
        EventUtil.preventDefault(event);
    });
    EventUtil.addHandler(droptarget,"dropenter",function(event){ 
        EventUtil.preventDefault(event);
    });
    
    
    /* dataTransfer 对象 它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据 只能在拖放事件的事件处理程序中访问dataTransfer属性 */
    //设置和接收文本数据
    event.dataTransfer.setData("text","some text");
    var text = event.dataTransfer.getData("text");
    
    //设置和接收URL
    event.dataTransfer.setData("URL","http://www.wrox.com");
    var url = event.dataTransfer.getData("URL");