DOM事件第二彈（UIEvent事件）

此文章主要總結UIEvent相關的事件，如有不對的地方，歡迎指正。

一、uitls.js(綁定事件公共類)

var fixs = {
    'focusin': {
        standard: 'focus',
        ie: 'focusin'
    },
    'focusout':{
        standard: 'blur',
        ie: 'foucsout'
    },
    'input': {
        standard: 'input',
        ie: 'propertychange'
    }
}
var uitls = {
    bindEvent: function(dom, eventType, fun, useCapture){
        var fix = fixs[eventType];
        if(document.addEventListener){
            dom.addEventListener( fix ? fix.standard : eventType, fun, useCapture);
        }else{
            dom.attachEvent('on' + ( fix ? fix.ie : eventType ), fun);
        }
    }
};

主要做一些事件名的相容性處理。

二、baseEvent

2.1 相容點

1. 當load事件應用在script元素上時，在Ie不支持，需要用onreadystatechange事件來代替（error會作為一個狀態來傳遞）;
2. script的error，在ie上也是不支持的，也是通過onreadystatechange事件來代替（狀態值）。
3. select相關相容性參考：'做一個留言板：輸入框'

2.2 一些代碼

var img = document.getElementById('img');
var btn = document.getElementById('btn');
uitls.bindEvent(img, 'load', function(event){
    console.log('load img');
});
uitls.bindEvent(btn, 'click', function(event){
    img.src = '../../img/bck.png';
});
window.onload = function(event){
    console.log('window');
}
window.onbeforeunload = function(event){
    console.log('window onbeforeunload');
    return false;
}
window.onunload = function(evet){
    console.log('window unload');
}
img.src='../../img/a.jpg';

1. onbeforeunload：可以控制是否向用戶提示 離開，還是留在當前頁面。

三、焦點事件

不是所有的標簽都支持焦點事件，如div（不可編輯狀態）、span、p等這類佈局和顯示內容的標簽不支持焦點事件，主要form、以及form下的標簽支持焦點事件。

3.1 代理事件的相容處理方案

1. ie、opera、chrome等都支持focusin和focusout，但firefox不支持focusin和focusout。
2. 但opera、chrome、firefox的focus和blur不支持冒泡，但支持捕獲

3.2 實現代碼

<form id="form" >
    <input type="text" />
    <input type="text" />
</form>
<script src="./uitls.js"></script>
<script>
    var _form = document.getElementById('form');
    uitls.bindEvent(_form, 'focusin', function(event){
        console.log('focusin: ' + ( event.target || event.srcElement ));
    }, true);
</script>

設置了addEventListener的第三個參數為true，表示在捕獲階段執行。

3.3 代碼觸focusin事件

我們這裡需要做一個相容方案處理，在現代瀏覽器下需要用focus來觸發，因為我們綁定是focus事件。

var inputone = document.getElementById('inputone');
var focusinEvent = document.createEvent('UIEvents');
focusinEvent.initUIEvent('focus',true,true); //後面兩個參數為true或false都沒有影響， 因為focusin發生在捕獲階段
_form.dispatchEvent(focusinEvent); //inputone也可以

四、輸入事件(oninput和onpropertychange)

實現輸入內容的動態監測。

4.1 區別與相容性

1. oninput為現代瀏覽器的特性(ie9+都ok)，只有改變控制項的value才會觸發oninput，但js改變value不會觸發oninput，並且oninput需要只能通過addEventListener註冊
2. onpropertychange可以用attachEvent和.onpropertychanage註冊，但input為disable=true的不能執行
3. oninput，在從瀏覽器自動下拉提示中選取時，不會觸發.

4.2 註意

1. onpropertychanage事件，是屬性值發生改變就會觸發，如果我們一個動作導致兩個屬性值改變，就會觸發兩次：

<select id="sel" >
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
</select>
var sel = document.getElementById('sel');
uitls.bindEvent(sel, 'input', function(event){
    var target = event.target || event.srcElement;
    console.log("sel:" + target.value);
});

五、複合事件

說明：

1. 這三個事件中傳入的event對象，會多一個data屬性，代表當前輸入的字元。
2. 英文輸入狀態不會觸發這三個事件，只有非英文輸入才觸發（用輸入法來確定的）
3. ie8-不支持此類事件

5.1 composition與input事件的結合，以及標準瀏覽與ie、edge的區別

示例代碼：

<input id="input" type="text" />
<script src="./uitls.js"></script>
<script>
    var input = document.getElementById('input');
    uitls.bindEvent(input, 'compositionstart', function(event){ //英文不行，中文可以（識別的是輸入法），開始輸入狀態
        console.log('compositionstart: ' + event.target + " " + event.data);
    });
    uitls.bindEvent(input, 'compositionend', function(event){ //輸入結束狀態
        console.log('compositionend: ' + event.target + " " + event.data)
    });
    uitls.bindEvent(input, 'compositionupdate', function(event){ //輸入過程中，
        console.log('compositionupdate: ' + event.target + " " + event.data)
    });
    uitls.bindEvent(input, 'input', function(event){
        console.log('input: ' + input.value);
    });
</script>

說明：

1. 程式主動觸發代碼如下：

var compositionstartEvent = document.createEvent('UIEvents');
compositionstartEvent.initUIEvent('compositionstart', false, false);
input.dispatchEvent(compositionstartEvent);