本次隨筆是針對于近期一個月遇到的所有的情況所記錄的問題以及解決方案總結；
一、事件委托
事件委托近期主要是針對于用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...
}
通過檢測輸入時的字串長度和輸入后做了空格處理的字串長度這兩個長度是否相等來決策使用什么事件，同時聯合如果有中文鍵盤輸入和英文鍵盤交替的使用下情況，采取通過一個狀態值來檢測；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100524.html
標籤：JavaScript