Javascript 焦点事件与dispatchEvent

当我在输入框上使用

dispatchEvent

触发

focus

事件时，将调用其

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事件，出于安全原因，这一点很重要，因为它防止脚本模拟与浏览器本身交互的用户操作

另请注意，如果您正在处理IE，则应使用

fireEvent（）

。此外，

dispatchEvent

和

fireEvent

方法之间的主要区别在于

dispatchEvent

方法调用事件的默认操作，而

fireEvent

方法不调用

因此，对于解决方案，请尝试这个

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

---

您在哪个浏览器上测试过这个？IE8和UnderThank中不支持dispatchEvent！那么，您的意思是执行test.focus（）不调用任何事件，而只调用测试元素的focus方法吗？不，我的意思是，如果调用test.onfocus（），则没有必要对测试进行聚焦。必须显式调用将光标移到

test

元素的

test.focus（）

方法。