this.focus() 会触发 FocusEvent 吗？

Question

对于纯 Javascript（没有 jQuery），如果我在 HTMLElement 上添加一个 FocusEvent 处理程序，然后在这个非常重要的地方以编程方式调用 focus()同样 HTMLElement，会调用 FocusEvent 处理程序吗？

答案在多大程度上取决于浏览器类型？

从这个 source 我会说：是的，它被调用但它不会在元素层次结构中冒泡（就像在 jQuery 中一样）。这是正确的吗？

Answer 1

我this little repro on Stackblitz触发了焦点，你可以看到触发了。这是代码：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  React.useEffect(() => {
    document.querySelector('.myInput').focus()
  }, []);
  return (
    <div  onFocus={console.log('Focused')}>
      <input type='text' onFocus={console.log('Hello')} className='myInput' />
    </div>
  );
};

render(<App />, document.getElementById("root"));

当页面加载时，您可以看到 console.log 显示在控制台中，这意味着事件已被触发。是的是 React，但它仍然 javascript 落后，我不认为它改变了它的工作方式。

这只是一个基本行为，所以我不敢冒险说这在每个浏览器中都是相同的行为，甚至是 IE。

关于冒泡，控制台还显示来自父 div 的 onFocus 的 console.log，所以我会说是的，它确实冒泡了，至少在反应中。我试过 focusIn，它也冒泡了，所以..我真的不知道。

在纯 js 中，就像在这段代码中：

<div onFocus="console.log('triggeredparent')">
    <input type='text' onFocus="console.log('Hello')" id='myInput' />
</div>

<script>
  const appDiv = document.getElementById('app');
  const myInput = document.getElementById('myInput')

  myInput.focus();
</script>

事件已触发，但不会因 onFocus 或 focusIn 而冒泡。可能是我做错了。

对于你在评论中的问题，如果元素已经获得焦点，在纯js中，onFocus似乎不会触发第二次焦点事件。这是我用来测试它的代码：

<div onFocus="console.log('triggeredparent')">
    <input type='text' onFocus="focusInput()" id='myInput' />
</div>

<script>
  const appDiv = document.getElementById('app');
  const myInput = document.getElementById('myInput')

  myInput.focus();

function focusInput(){
  console.log('hello');
  myInput.focus();

}
</script>

希望它不会因为你这样做会陷入无限循环。

这里是 the stackblitz 我做测试的地方。

this.focus() 会触发 FocusEvent 吗？

Does this.focus() fire an FocusEvent?

javascript

dom-events