Javascriptでonclickやonblur等の発動順序をまとめます。
細かいことのようですが、覚えて置くと意外と役に立ちます。
結論
下記のような順序で発動します。
| 順番 | イベント名 |
|---|---|
| 1 | onmousedown |
| 2 | onblur |
| 3 | onmouseup |
| 4 | onclick |
例
例えば、テキストフィールドでメールアドレスサジェストのUIを自作したとします。挙動としては下記のようになってほしい。
- 選択したサジェストのオプションをテキストフィールドの値に反映し、サジェストのリストを消す
- サジェストのリスト外をクリックしたらサジェストのリストを消す
便宜的に、テキストフィールドをinputタグ、サジェストリストをulで表します。
ダメな例
sample.html
<input onblur="サジェストのリストを消す処理" />
<ul onclick="選択されたオプションをinputのvalueに反映する処理">
<li>@gmail.com</li>
<li>@yahoo.co.jp</li>
<li>@hogehoge.ne.jp</li>
</ul>
ブラウザによって挙動が異なるかもしれませんが、これだとうまくいかない事があります。
onclickよりonblurの方が早く発動するので、ulタグのonclickが発動する前に消えてしまい、選んだつもりの値がテキストフィールドに反映されません。
良い例
sample.html
<input onblur="サジェストのリストを消す処理" />
<ul onmousedown="選択されたオプションをinputのvalueに反映する処理">
<li>@gmail.com</li>
<li>@yahoo.co.jp</li>
<li>@hogehoge.ne.jp</li>
</ul>
こうすると、選択されたオプションをinputのvalueに反映する処理の方が先に発動するので、想定通りの動作となります。