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

如果你想设置的焦点，那么只需要调用的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>

调度事件不会将重点focus method，这只会触发附加事件处理程序。

在jQuery中调用焦点（）方法会触发事件，如果需要，也将调用本机行为的方法，这就是为什么这是工作