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[].elements[].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(,textbox.value.length);//第一個參數是文本起始位置，第二個是結尾位置  即表示擷取文本的範圍

//表單序列化
function serialize(form){
    var parts = [];
    field = null,
    i,j,len,option,optLen,optValue;

    for(i = , 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 = ,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");