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中調用焦點（）方法會觸發事件，如果需要，也將調用本機行爲的方法，這就是爲什麼這是工作