javascript - 如何在不实际聚焦元素的情况下触发焦点处理程序？

Question

jQuery 像这样启用它：

$( "input" ).triggerHandler( "focus" );

如果没有 jQuery，我怎样才能达到同样的效果？

https://api.jquery.com/triggerHandler/

标签： javascript

Answer 1

您在要触发dispatchEvent的元素上使用。请参阅此处focus的文档和示例。

const event = new FocusEvent('focus', {
  view: window,
  bubbles: true,
  cancelable: true
});

const myInput = document.getElementById('myInput');

myInput.dispatchEvent(event);

#myInput:focus {
  background: red;
}

<input id="myInput" type="text" onfocus="console.log('Input focused!');"/>

在上面的代码中可以看到，console.log语句是根据绑定到input标签的事件来运行的，但是元素实际上并没有被聚焦（因为否则输入框会是红色的，你可以点击它来尝试）。