JS dispatch event

Question

I am trying to focus on a link with a given index using js dispatch event:

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

The code above won't work whereas the jQuery version works OK:

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

I am testing in the latest Chrome. What is wrong with the JS version?

Answer 1

If you want to set the focus, then just call the focus method of the dom element

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 the event will not set the focus, that will just trigger the attached event handlers.

In jQuery calling the focus() method will trigger the event and will also call the native behavior method if needed that is why that is working