使用dispatchEvent获得焦点事件

当我触发一个focus事件与dispatchEvent在输入框上，其onfocus被调用，但在 UI 上输入框未获得焦点。 这种行为有什么原因吗？

var test = document.getElementById("test");
test.onfocus = function(event) {
  console.log('focused');
}
var e = document.createEvent('Event');
e.initEvent("focus", true, true);
test.dispatchEvent(e);

另一方面，这按预期工作。

var test = document.getElementById("test");
test.focus();

我调查这个的原因是我使用 ZeptoJS 来触发事件并且它使用dispatchEvent.

您触发事件的元素不必监听该事件，因为父元素也可能正在监听该事件。

请注意，手动触发事件不会生成与该事件关联的默认操作。例如，手动发射focus事件不会导致元素接收焦点（您必须使用其focus()方法），手动触发submit事件不提交表单（使用submit()方法），手动触发按键事件不会导致该字母出现在焦点文本输入中，并且手动触发链接上的单击事件不会导致链接被激活，等等。对于 UI 事件，这是出于安全原因，这很重要，因为它可以防止脚本模拟与浏览器本身交互的用户操作。

另请注意，您应该使用fireEvent()，如果您正在使用 IE。此外，两者之间的主要区别dispatchEvent and fireEvent方法是dispatchEvent方法调用事件的默认操作，fireEvent方法没有。

所以对于解决方案请尝试这个

test.onfocus = function(event) {
  console.log('focused');
  if( ! test.hasFocus() ) {
    test.focus();
  }
}