blurなどのHTMLEvent イベントをちゃんとおこしてみる

blur イベントが上手く起きない

react などちょっと最近のJSだと Element.blur() で イベントが発火しなかった。

動かない

a=document.querySelector("#zipCode")
a.blur()

blur とかフォーカスのイベントハンドラが上手く起動しない。

動く

ちゃんとEventをdispatch すればうごく

a=document.querySelector("#zipCode")
a.value = '1030001'
var evt = document.createEvent("HTMLEvents");
evt.initEvent("blur", false, true);
e.dispatchEvent(evt);

これは、CustomeEventでも作れて

a=document.querySelector("#zipCode")
a.value = '1030002'
evt = new CustomEvent('blur')
e.dispatchEvent(evt);

または、ちゃんとFoucsEventをnew して

evt = new FocusEvent('blur')
e.dispatchEvent(evt);

こうすれば、イベントがうまくは起動する。HTMLElement.blur() HTMLElement.focus() だとイベントが起きないのかなぁ

昔から疑問だったんだけど、未だによくわからない。