国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > 搜狗云输入法JS文件剖析(三)

搜狗云输入法JS文件剖析(三)

来源:程序员人生   发布时间:2014-06-16 04:35:59 阅读次数:2607次
这篇主要分析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输入框一样的,也是绑定了三个事件。

最后是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个,其它的绑一个 - 有些复杂啊~~~)
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------

上一篇 红网CEO舒斌:原创是网站生存之道

下一篇 Access入门教程 13.3 确定分组级别和排序次序

分享到:
------分隔线----------------------------
为码而活
积分:4237
15粉丝
7关注
栏目热点
关闭
程序员人生