JS 调度事件

Question

我正在尝试使用 js 调度事件关注具有给定索引的 link：

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

如果要设置焦点，那么调用dom元素的focus method就可以了

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>

调度事件不会设置焦点，只会触发附加的事件处理程序。

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

JS 调度事件

JS dispatch event

javascript

jquery

events

dispatch