搜狗云输入法JS文件剖析（三）

这篇主要分析imeBindInput函数。

现在才发现，网上的解压代码有些问题，由于我没研究过代码的压缩算法，对于解压也不是很熟悉，所以暂时没精力去精确还原全部代码，既然这篇文章分析的是imeBindInput函数，那么就直接从内存里面把代码请出来吧：

function 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.textarea
3.iframe

另外对顶层元素（这里是document）进行事件绑定：

1.如果是标准浏览器则绑定keydown/mousedown
2.如果是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=>imeInput
keydown=>imeKeyDown
keypress=>imeKeyPress

- 呃，干嘛keyup对应的不是imeKeyUp?

接下来是textarea元素，按理说区别应该是回车的处理。
大概扫了一眼，发现代码是和text输入框一样的，也是绑定了三个事件。

最后是iframe的绑定，这时候主要就是利用imeBindInput对自身的递归调用了。

                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);
                }

对这代码有些无语，但为了执行速度，也只好这样了。
要是我就写成：

var i= m[i];
if(var a=i.contentDocument || i.contentWindow.document)
    ime_iframe_arr.push(i);
    i.imebind = true;
    imeBindInput(a);
}

OK，现在回来总结一下。

这个函数主用用于对参数（一开始为document）底下（包括iframe）的普通输入框（type=text的input和textarea）进行三个键盘事件绑定（keyup/keydown/keypress），最后对参数的keydown/mousedown/activate事件进行绑定（IE绑3个，标准的绑2个，其它的绑一个 - 有些复杂啊~~~）