javascript - JS 调度事件

Question

我试图使用 js 调度事件关注具有给定索引的链接:

var link = document.querySelector(".navbar-nav > li:nth-child(" + index + ") > a");
var event = new Event("focus");
link.dispatchEvent(event);

上面的代码不起作用，而 jQuery 版本则可以正常工作:

$(".navbar-nav > li:nth-child(" + index + ") > a").focus();

我正在最新的 Chrome 中进行测试。 JS版本有什么问题吗？

Answer 1

如果你想设置焦点，那么只需调用 focus method dom 元素的

function setFocus(index) {
  var link = document.querySelector(".navbar-nav > li:nth-child(" + index + ") > a");
  link.focus()
}

<ul class="navbar-nav">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>
<button onclick="setFocus(1)">1</button>
<button onclick="setFocus(2)">2</button>
<button onclick="setFocus(3)">3</button>
<button onclick="setFocus(4)">4</button>

分派(dispatch)事件不会设置焦点，只会触发附加的事件处理程序。

在 jQuery 中，调用 focus() 方法将触发事件，并且如果需要的话还将调用 native 行为方法，这就是它起作用的原因