在编写Chrome扩展的时候,我们需要修改一个input控件的内容，并且在内容修改完成后，需要触发控件的onFocus,onBlur事件，在这两个事件中，网页有相关的处理逻辑。
使用如下代码修改input控件的内容的时候，没有正确的触发焦点变化事件：
|
1 2 3 4 |
var inputElement = document.getElementsByTagName("inputTagName"); inputElement.focus(); inputElement.value="123456"; inputElement.blur(); |
经过Google发现，原来不能直接调用控件的事件函数，直接调用控件事件函数会导致事件流程不正确，尤其是网页使用Kissy,JQuery框架的时候，可能导致框架内部流程异常。
应当通过发送事件的方式，驱动整个框架的运行，代码如下：
|
1 2 3 4 5 6 7 8 |
var inputElement = document.getElementsByTagName("inputTagName"); var focusEvent = document.createEvent("HTMLEvents"); focusEvent.initEvent("focus", true, true); inputElement.dispatchEvent(focusEvent); inputElement.value="123456"; var blurEvent = document.createEvent("HTMLEvents"); blurEvent.initEvent("blur", true, true); inputElement.dispatchEvent(blurEvent); |
同样的道理适用于change事件触发的情况：
|
1 2 3 4 |
var inputElement = document.getElementsByTagName("inputTagName"); var changeEvent = document.createEvent("HTMLEvents"); changeEvent.initEvent("change", true, true); inputElement.dispatchEvent(changeEvent); |