7

当我在输入框上触发focus事件时，它 会被调用，但在 UI 上，输入框没有聚焦。这种行为有什么原因吗？dispatchEventonfocus

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.

4

1 回答 1

7

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

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

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

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

test.onfocus = function(event) {
  console.log('focused');
  if( ! test.hasFocus() ) {
    test.focus();
  }
}
于 2011-07-05T05:13:03.477 回答