WEBサイトをjavascriptで管理していると、イベント迷子になってしまうことがある。
イベント迷子とは、setTimeoutや、mouseoverなどのイベントコールバック関数で、今現在どの入力項目にアタッチしているのか分からなくなってしまうという場合です。
そうならないために、イベント発生を極力、処理を行うエレメント（動作させる入力フォームなど）にセットしてcurrentTargetで迷子にならないようにしますが、settimeoutなど、グローバル系のコールバックでしばしば迷子になってしまうことがあります。
こんな時どうする？
入力フォームページで一定時間たった段階で、現在どの項目を入力しているのか確認したい場合などは、全てのformに存在するinputなどのformタグをなめて、入力バリデーションチェックを行なうという風にしますが、今どこにいるのかは見つけられません。 また、checkboxやradioボタンで複数ある項目のどの項目を最後にクリックしたかを取得するような場合も、項目全てにonclickイベントを設置して行なう事も可能ですが、無駄な処理を増やさずになるべくページ内共通処理で行いたい場合などは、なかなかサーチするのに手間が掛かります。 他にも、ページ内計測をしたいツールを作るような場合に、ページ内の全てのelementに対して、どの項目にforcusが当たったかを計測したいような場合、全てのelementに対してイベントセットをする事は比較的無駄が多く、処理負荷も高くなることは用意に想像できます。簡単に使えるactiveElement
今現在どの項目を操作しているかを知りたい時は下記の様子するだけなので、さほど難しい事ではありません。var currentElement = document.activeElement;
入力フォームのinputタグを見つけるのには非常に便利な命令です。
ちなみに、EFO開発をやっていた時に、この命令を知らずに構築していました・・・orz
この命令を使うと、今現在カーソルがどのelementに当たっているかや、今現在入力しているtext項目などが即座に取得できます。
他にも「どのボタンをクリックしたか」や、「どのリンクをクリックしたか」「選択されているタブ」などなど、activeなelementを即座に知ることができれば、対応もすごく楽になるし、かなり管理しやすいWEBシステムの構築が行なえます。
activeElementの利用範囲
"Can I use"で調べてみたところ、since IE6+, Firefox 2+, Chrome 1+という風に出てきました。 ※いつものようなグラフで表示されなかったので、拍子抜けでしたが・・・ まあIE6から使えるのであれば、さほど構えてプログラムする必要もないでしょうね。 そういえばsafariとoperaが載っていないので、簡単なプログラムを作って自分で確認してみました。
See the Pen dLyPgE by YugetaKoji (@geta1972) on CodePen.
<html>
<head>
<title>activeElement</title>
<style>
body *{
display:block;
margin:8px;
}
</style>
<script>
window.onclick = function(){
var currentElement = document.activeElement;
if(currentElement.name){
console.log(currentElement.name);
}
};
</script>
</head>
<body>
<h1>active element</h1>
<div class="form">
<input type="text" name="input_1">
<select name="select_1">
<option name="option_1" value="list-1">List-1</option>
</select>
<input type="checkbox" name="input_2">
<textarea name="input_3"></textarea>
<input type="button" name="button_3" value="Button">
</div>
</body>
</html>
手元のブラウザで確認してみたところ・・・
【Windows】 IE : ○ Edge : ○ Chrome : ○ Firefox : ○ Safari : ○ Opera : ○ 【Mac】 Chrome : ○ Firefox : ○ Safari : ○ Opera : ○
