带有 dispatchEvent 的焦点事件

Question

当我在输入框上使用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。

Answer 1

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

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

还请注意，如果您使用的是 IE，则应使用 fireEvent()。另外，dispatchEvent 和fireEvent 方法的主要区别在于dispatchEvent 方法调用事件的默认操作，fireEvent 方法不调用。

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

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