JS événement dispatch

Question

Je suis en train de se concentrer sur un lien avec un indice donné en utilisant événement dispatch js:

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

Le code ci-dessus ne fonctionne pas alors que la version jQuery fonctionne OK:

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

Je suis en train de tester dans la dernière version de Chrome. Quel est le problème avec la version JS?

Answer 1

Si vous souhaitez définir la mise au point, puis il suffit d'appeler le focus method de l'élément 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>

Dispatching l'événement ne sera pas mis l'accent, qui va juste déclencher l'événement ci-joint les gestionnaires.

En jQuery appelant la méthode mise au point() déclenche l'événement et fera également appel à la méthode de comportement natif si nécessaire qui est pourquoi travaille