EventUtil 跨浏览器事件处理对象

/**
 * 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");