JS 调度事件答案

【问题标题】：JS dispatch eventJS 调度事件
【发布时间】：2015-08-25 09:35:56
【问题描述】：

我正在尝试使用 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版本有什么问题？

【问题讨论】：

标签： javascript jquery events dispatch

【解决方案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 书 ;-( 谢谢！