如何以跨浏览器的方式触发focusin事件？

Question

我发现仅使用Javascript（不使用jQuery）手动触发focusin事件非常困难，因为这是一个测试套件。

显然，当浏览器没有焦点时（只有在测试中才可能发生），我想模拟focusin事件。

我发现CustomEvent构造函数可以工作。

var event = new CustomEvent('focusin', { bubbles: true, cancelable: false });
this.dispatchEvent(event);

但我需要让它支持IE9+。老式的方法似乎行不通。

var event = document.createEvent('Event');
event.initEvent('focusin', true, false);
this.dispatchEvent(event);

据我所知，这两种结构在功能上应该是等效的，但显然不是真的。在浏览器窗口没有焦点时，在Chrome / Firefox / Safari中进行测试。

第二个片段有什么问题吗？

- miguel.camba

---

焦点是否正确？我认为应该只是聚焦。 - thelastshadow

@thelastshadow：focusin是冒泡版本的focus：https://developer.mozilla.org/zh-CN/docs/Web/Events/focusin - T.J. Crowder

是的，没错。这就是为什么我要指定 bubble: true。 - miguel.camba

Answer 1

如果元素有子元素，您可以通过调用firstElementChild上的focus()来实现此操作。

let el = document.getElementById('myDivId');
el.firstElementChild.focus();

这将触发 div 上的 focusin 事件，并冒泡到任何 div 的父级元素。

- maburdi94