Element on focus event listener is not being triggered using element.focus()

Question

Any idea why the event listener is not being triggered in this case?

If I change focus to click, it works fine.

jsfiddle:

https://jsfiddle.net/bobbyrne01/cda3tpfq/

html:

<div id="result">
  No focus.
</div>

js:

var myElement = document.createElement('myElement');
myElement.setAttribute('tabindex', -1);
myElement.addEventListener('focus', function() {
  document.getElementById('result').textContent = 'Focus recieved.';
});

myElement.focus();

Answer 1

Assuming you want to update the inner text in the div, something like this should work..

html:

<div id="result" tabindex="-1">no focus</div>

js:

var myElement = document.getElementById('result');
myElement.addEventListener('focus', function() {
    myElement.innerText = 'Focus received.';
},true);

Then either manually click on the div to focus or use myElement.focus()