搜狗云輸入法JS文件剖析（三）
來源：程序員人生 發布時間：2014-06-16 04:35:59 閱讀次數：3089次
這篇主要分析imeBindInput函數。
現在才發現，網上的解壓代碼有些問題，由于我沒研究過代碼的壓縮算法，對于解壓也不是很熟悉，所以暫時沒精力去精確還原全部代碼，既然這篇文章分析的是imeBindInput函數，那么就直接從內存里面把代碼請出來吧：
imeBindInputfunction imeBindInput(a) {
try {
var b = a.getElementsByTagName("input");
for (var i = 0; i < b.length; i++) {
if (b[i].type == "text") {
b[i].imebind = true;
b[i].onkeyup = null;
b[i].onkeydown = null;
b[i].onkeypress = null;
b[i].onfocus = null;
b[i].onblur = null;
b[i].onclick = null;
if (document.addEventListener) {
b[i].addEventListener("keyup", imeInput, true);
b[i].addEventListener("keydown", imeKeyDown, true);
b[i].addEventListener("keypress", imeKeyPress, true);
} else if (document.attachEvent) {
b[i].detachEvent("onkeydown", b[i].onkeydown);
b[i].detachEvent("onkeyup", b[i].onkeyup);
b[i].detachEvent("onkeypress", b[i].onkeypress);
b[i].detachEvent("onfocus", b[i].onfocus);
b[i].detachEvent("onblur", b[i].onblur);
b[i].attachEvent("onkeyup", imeInput);
b[i].attachEvent("onkeydown", imeKeyDown);
b[i].attachEvent("onkeypress", imeKeyPress);
} else {
var c = b[i].onkeyup ? b[i].onkeyup : function () {};
b[i].onkeyup = function () {c();imeInput();};
var d = b[i].onkeydown ? b[i].onkeydown : function () {};
b[i].onkeydown = function () {d();imeKeyDown();};
var f = b[i].onkeypress ? b[i].onkeypress : function () {};
b[i].onkeypress = function () {f();imeKeyPress();};
}
}
}
var g = a.getElementsByTagName("textarea");
for (var i = 0; i < g.length; i++) {
g[i].imebind = true;
g[i].onkeyup = null;
g[i].onkeydown = null;
g[i].onkeypress = null;
g[i].onfocus = null;
g[i].onblur = null;
g[i].onclick = null;
if (document.addEventListener) {
g[i].addEventListener("keyup", imeInput, true);
g[i].addEventListener("keydown", imeKeyDown, true);
g[i].addEventListener("keypress", imeKeyPress, true);
} else if (document.attachEvent) {
g[i].detachEvent("onkeydown", g[i].onkeydown);
g[i].detachEvent("onkeyup", g[i].onkeyup);
g[i].detachEvent("onkeypress", g[i].onkeypress);
g[i].detachEvent("onfocus", g[i].onfocus);
g[i].detachEvent("onblur", g[i].onblur);
g[i].attachEvent("onkeyup", imeInput);
g[i].attachEvent("onkeydown", imeKeyDown);
g[i].attachEvent("onkeypress", imeKeyPress);
} else {
var c = g[i].onkeyup ? g[i].onkeyup : function () {};
g[i].onkeyup = function () {c();imeInput();};
var d = g[i].onkeydown ? g[i].onkeydown : function () {};
g[i].onkeydown = function () {d();imeKeyDown();};
var f = g[i].onkeypress ? g[i].onkeypress : function () {};
g[i].onkeypress = function () {f();imeKeyPress();};
}
}
if (a.addEventListener) {
a.addEventListener("keydown", imeBodyKeyDown, true);
a.addEventListener("mousedown", imeBodyMouseDown, true);
} else if (a.attachEvent) {
a.attachEvent("onkeydown", imeBodyKeyDown);
a.attachEvent("onmousedown", imeBodyMouseDown);
a.attachEvent("onactivate", imeBodyActive);
} else {
var l = a.onmousedown ? a.onmousedown : function () {};
a.onmousedown = function () {l();imeBodyMouseDown();};
}
var m = a.getElementsByTagName("iframe");
for (var i = 0; i < m.length; i++) {
try {
if (m[i].contentDocument) {
var a = m[i];
ime_iframe_arr.push(a);
a.imebind = true;
var a = a.contentDocument;
imeBindInput(a);
} else if (m[i].contentWindow.document) {
var a = m[i];
ime_iframe_arr.push(a);
a.imebind = true;
var a = a.contentWindow.document;
imeBindInput(a);
}
} catch (e) {
}
}
} catch (e) {
}
}
先從大局入手： 可以看出，綁定的地方有：1.type=text的輸入框2.textarea3.iframe另外對頂層元素（這里是document）進行事件綁定：1.如果是標準瀏覽器則綁定keydown/mousedown2.如果是ie瀏覽器則追加activate事件3.其它的則僅僅追加mousedown事件PS：這個函數采用了try語句，看來作者對這一塊操作也不是很有信心啊，呵呵~~先來看看最簡單的text輸入框是怎么綁定事件的吧。
b[i].imebind = true;
b[i].onkeyup = null;
b[i].onkeydown = null;
b[i].onkeypress = null;
b[i].onfocus = null;
b[i].onblur = null;
b[i].onclick = null;
if (document.addEventListener) {
b[i].addEventListener("keyup", imeInput, true);
b[i].addEventListener("keydown", imeKeyDown, true);
b[i].addEventListener("keypress", imeKeyPress, true);
} else if (document.attachEvent) {
b[i].detachEvent("onkeydown", b[i].onkeydown);
b[i].detachEvent("onkeyup", b[i].onkeyup);
b[i].detachEvent("onkeypress", b[i].onkeypress);
b[i].detachEvent("onfocus", b[i].onfocus);
b[i].detachEvent("onblur", b[i].onblur);
b[i].attachEvent("onkeyup", imeInput);
b[i].attachEvent("onkeydown", imeKeyDown);
b[i].attachEvent("onkeypress", imeKeyPress);
} else {
var c = b[i].onkeyup ? b[i].onkeyup : function () {};
b[i].onkeyup = function () {c();imeInput();};
var d = b[i].onkeydown ? b[i].onkeydown : function () {};
b[i].onkeydown = function () {d();imeKeyDown();};
var f = b[i].onkeypress ? b[i].onkeypress : function () {};
b[i].onkeypress = function () {f();imeKeyPress();};
}
首先對輸入框追加imebind屬性接著講輸入框的鍵盤、焦點、點擊事情全取消了（僅僅針對<span click=”…”>click me</span>這種寫法），至于為什么，我也沒法理解，感覺這樣不是改變了原有元素事件了嗎，吃力而且不討好。最后又是根據不同的瀏覽器器進行事件綁定，按理說應該對此進行封裝，但是沒有辦法，針對IE又特殊照顧了一下（先detachEvent刪除了事件），至于為什么，再次無法理解，看來自己在事件綁定方面的能力太差了，比如說分不清b[i].onkeyup = null和b[i].detachEvent("onkeyup", b[i].onkeyup); 的區別。好吧，先稍微總結一下。主要對輸入框進行三項事件綁定：keyup=>imeInputkeydown=>imeKeyDownkeypress=>imeKeyPress- 呃，干嘛keyup對應的不是imeKeyUp?接下來是textarea元素，按理說區別應該是回車的處理。大概掃了一眼，發現代碼是和text輸入框一樣的，也是綁定了三個事件。
