HTML 事件解说之一 text 文本框

 

今天同学们在做Selenium的扩展，针对JQuery的某些插件，标准的click或type命令难已触发JQuery定义的一些事件，比如一个标准的type方法触发的事件如下：

BrowserBot.prototype.replaceText = function(element, stringValue) { triggerEvent(element, 'focus', false); triggerEvent(element, 'select', true); var maxLengthAttr = element.getAttribute("maxLength"); var actualValue = stringValue; if (maxLengthAttr != null) { var maxLength = parseInt(maxLengthAttr); if (stringValue.length > maxLength) { actualValue = stringValue.substr(0, maxLength); } } if (getTagName(element) == "body") { if (element.ownerDocument && element.ownerDocument.designMode) { var designMode = new String(element.ownerDocument.designMode).toLowerCase(); if (designMode = "on") { // this must be a rich text control! element.innerHTML = actualValue; } } } else { element.value = actualValue; } // DGF this used to be skipped in chrome URLs, but no longer. Is xpcnativewrappers to blame? try { triggerEvent(element, 'change', true); } catch (e) {} };

 

由此可以看出实际上 type 命令触发的实际只有 focus，select 和 change， 远远不能满足我们的要求，而是他们写了一些新的命令来实现，我没有同意，实际上是我们没有真正弄清楚事件的触发机制，而是我找了一个页面来证实事件的触发顺序。

 

前面我们列出了标准的键盘事件包括以下三种：

属性	值	描述
onkeydown	脚本	当键盘被按下时执行脚本
onkeypress	脚本	当键盘被按下后又松开时执行脚本
onkeyup	脚本	当键盘被松开时执行脚本

 

以上说明已很清楚，只不过还是分情形的，通常我们要对文本框进行操作，首先要让他获得焦点，有两种方法，鼠标点击和 tab 键切换，并且无任那种方法，都事先有个 focus 事件被触发。

比如我们有两个text，我们用 tab 键切换焦点的事件顺序为：

{keydown(theTextbox - 9)} {keypress(theTextbox - 9)} {blur(theTextbox)} {focus(theTextbox1)} {select(theTextbox1)} {keyup(theTextbox1 - 9)}

这个事件序列很有意思，尤其是最后一个，keyup 发生在第二个text 上，这可是个bug 多发区。

 

同样的两个text， 用鼠标点击来切换焦点的事件顺序为：

{mouseout(theTextbox)} {mouseover(theTextbox1)} {mousedown(theTextbox1)} {blur(theTextbox)} {focus(theTextbox1)} {mouseup(theTextbox1)} {click(theTextbox1)}

这个事件序列还比较正常，没什么特殊之处。

 

在切换焦点之后的每一次键入都会触发这三个键盘事件，比如按下m键触发的事件有：

{keydown(theTextbox1 - 77)} {keypress(theTextbox1)} {keyup(theTextbox1 - 77)}

 

此时如果单击鼠标，则触发以下事件

{mouseover(theTextbox1)} {mousedown(theTextbox1)} {mouseup(theTextbox1)} {click(theTextbox1)} {mouseout(theTextbox1)} 

 

在完成输入，把焦点切换到其他元素时，这时发生在 text 的事件有两个：

{change(theTextbox1)} {blur(theTextbox1)}

 

这就是一个在文本框输入内容时的一个完整的事件机制，所以大家在开发，编写测试工具时得注意，千万不要多做事情，但更不能不做。

 

所以建议type的实现方式更改如下：

// Rewrite the type method to fire the keyboard event lance 2009-07-16 Selenium.prototype.doType = function(locator, value) { /** * Sets the value of an input field, as though you typed it in. * * <p>Can also be used to set the value of combo boxes, check boxes, etc. In these cases, * value should be the value of the option selected, not the visible text.</p> * * @param locator an <a href="#locators" mce_href="#locators">element locator</a> * @param value the value to type */ if (this.browserbot.controlKeyDown || this.browserbot.altKeyDown || this.browserbot.metaKeyDown) { throw new SeleniumError("type not supported immediately after call to controlKeyDown() or altKeyDown() or metaKeyDown()"); } // TODO fail if it can't be typed into. var element = this.browserbot.findElement(locator); if (this.browserbot.shiftKeyDown) { value = new String(value).toUpperCase(); } this.browserbot.replaceText(element, ""); this.doTypeKeys(locator,value); };

 

此方法将持续改进，希望能真实的模拟用户的输入。