本次隨筆是針對於近期一個月遇到的所有的情況所記錄的問題以及解決方案總結； 一、事件委托 事件委托近期主要是針對於用js代碼創建的動態html元素綁定事件的情況，給予該種情況分析和總結： （1）綁定動態的html標簽事件時，儘量不要將事件的綁定目標設定為動態html標簽上，因為會出現這樣的情況：當文件 ...
本次隨筆是針對於近期一個月遇到的所有的情況所記錄的問題以及解決方案總結；
一、事件委托
事件委托近期主要是針對於用js代碼創建的動態html元素綁定事件的情況，給予該種情況分析和總結：
（1）綁定動態的html標簽事件時，儘量不要將事件的綁定目標設定為動態html標簽上，因為會出現這樣的情況：當文件初始化的時候，會掃描DOM樹，並且在這個時候會將事件綁定在成功掃描的DOM樹的DOM節點上，這樣就有一個問題了，我們綁定的事件如果是綁定在利用js動態創建的html標簽上時，難免會有這樣的情況——該html代碼塊並非在你一初始化就會選擇創建並掛載到DOM樹上的，而是通過一些特定的條件才會去動態創建和掛載到DOM樹上的，例如你想用js動態創建一個彈窗；這樣的話就不會在一開始的時候掃描到該元素，那麼倘若將事件掛載到該目標身上，就會出現在一初始化的時候，由於掃描不到該目標元素而導致將該事件綁定到了一個在初始化時根本就不存在於DOM樹節點，導致事件綁定失敗，現象表現是在你後面創建該DOM節點後，想觸發該事件時沒有反應，觸發失敗；
這裡提供兩種解決方案:
a.將事件綁定在js動態創建的html代碼塊的一初始化就已經存在於DOM樹上的父元素上，也就是事件委托；這裡拿jQuery舉例子，在jQuery的事件裡面有個專用於事件委托的api：on；使用該方法就可以很輕鬆的實現解決以上的問題；jQuery手冊鏈接:http://hemin.cn/jq/even.html;
b.可以將事件綁定在用js動態創建的html代碼塊上，但是綁定的時機一定是要出現在該html代碼塊已經掛載到DOM樹上之後，這樣才能保證事件綁定成功，具體為什麼時間要是掛載到DOM樹上之後，這個原因我剛剛在分析的時候已經闡述了，即在js動態創建的html代碼塊初始化時一併將事件綁定上去；
二、如何使幾個併排的輸入框在一個輸入框里輸入值後自動將焦點聚焦到下一個輸入框里
三、關於目前已碰到的IOS的相容性問題的坑：
1.在IOS端，部分元素的點擊事件click觸發沒反應，失效；
解決方案：
（1）可以將點擊事件改為toutchend，然後在事件裡面加上已經'事件對象.preventDefualt()';
(2) 儘量在使用事件委托的時候，避免將委托的目標選定為document或者body上；
這裡第1個問題的解決方案轉載於鏈接:https://www.cnblogs.com/newbo/p/11350830.html;
2.在IOS端中文鍵盤輸入的情況下，input事件偶爾會觸發多次的情況
解決方案：
使用compositionend事件來監聽，個人感覺這個事件是專門針對於中文輸入法下設立的；該事件作用是在input框里輸入完你對內容後，才會觸發，這裡不是說輸入完後立馬觸發，而是中文輸入情況下，打字確定打完後按下回車鍵或者空格鍵的時候，這個時候該事件就會認定為輸入框的內容輸入完成，便會觸發該事件裡面的事情；因為IOS的中文輸入鍵盤在輸入的時候有個坑：在輸入的時候，不想其它的一些手機會是打字打完後再輸入到輸入框里，而是在邊打的時候，拼音會暫定輸入到輸入框里，並且每個拼音之間還有空格；這裡採用的是input事件和compositionend事件的混合使用，其實如果在不給input事件做觸發限制的情況下(這裡的觸發限制是指的給input事件設定條件才讓每次要滿足一定條件才執行你想要的執行的事件，否則進入input事件時直接空過，什麼都不做)，input事件是不管在中文狀態下或者英文輸入狀態下都會觸發的，這樣會有干擾，因此我們需要藉助compositionend事件做一個開關值來控制input事件的執行時機；就我自己做的項目為例，怎樣檢測當前用戶是英文狀態下輸入的還是中文鍵盤下輸入的情況：
var input_state = false;//檢測是否已經在中文鍵下完成輸入的狀態/* /
$('.popup-verify-img>input').on('input', function () {
var txyzm = $(this).val();
var length1, length2;
length1 = txyzm.length;/空格處理之前的字元串長度/
txyzm = txyzm.replace(/\s/g, '');
length2 = txyzm.length;/空格處理過後的字元串長度*/
if (length1 != length2 || input_state == true) {
console.log('ok');
return;
}
Do something...
}
$('.popup-verify-img>input').on('compositionend', function () {
var txyzm = $(this).val();
input_state = true;
Do something...
}
通過檢測輸入時的字元串長度和輸入後做了空格處理的字元串長度這兩個長度是否相等來決策使用什麼事件，同時聯合如果有中文鍵盤輸入和英文鍵盤交替的使用下情況，採取通過一個狀態值來檢測；
