【JavaScript】イベントオブジェクトの子要素【調査用】
どうも！LSSです！！
最近、JavaScriptのマウスイベント・タッチイベントに反応する仕掛けを作る事が増えてきました。
【ツール？】いろは歌作成補助ツール - Little Strange Software
【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software
「どこがイベントの発火地点（マウスカーソル位置・タッチ位置）なのか」を知るだけなら、「e」をイベントオブジェクトとした場合、「e.pageX」「e.pageY」（タッチの場合は「e.changedTouches[0].pageX」「e.changedTouches[0].pageY」）で事足りる話ですが、それでもやはり、それ以外のものを扱う必要が出てくる時があります。
そんな時に「どんな値が取り出せるんだっけ」「どんなスペルだっけ」となり、本で調べたりWebで検索したりするのですが、ちょっとその手間を簡略化するために、一覧出力＆Google検索結果を呼び出せるものを作ってみました。
clickイベントの場合
ここをクリック
touchstartの場合の、changedTouches[0]（タッチ対応端末限定）
ここをタッチ
いずれも、クリックorタッチするとずらずらと出てきます
出てくる一覧のうち、子要素名の箇所には、Google検索へのリンクがかかっており、「javascript event 子要素名」のキーワードで検索した結果ページが別タブで開きます。
一応、それぞれに使用したコードを晒しておきます。
クリックの方のコード
<style>
#btn{display:inline-block;border:5px outset #eeeedd;background:#ffffee;padding:3px;}
.einfo{border:1px solid black;padding:3px;}
#info div:nth-child(2n){background:#ffeeee;}
#info div:nth-child(2n+1){background:#eeeeff;}
</style>
<div id="btn">ここをクリック</div>
<div id="info"></div>
<p>
<script>
btn.addEventListener('click',evt,false);
function evt(e){
txt='';
for(i in e){
txt+='<div class="einfo">e.<a href="https://google.co.jp/search?q=javascript+event+'+i+'" target="_blank">'+i+'</a> : '+e[i]+'</div>';
}
info.innerHTML=txt;
}
</script>
</p>
タッチの方のコード
<style>
#btn2{display:inline-block;border:5px outset #eeeedd;background:#ffffee;padding:3px;}
#info2 div:nth-child(2n){background:#ffeeee;}
#info2 div:nth-child(2n+1){background:#eeeeff;}
</style>
<div id="btn2">ここをタッチ</div>
<div id="info2"></div>
<p>
<script>
btn2.addEventListener('touchstart',evt2,false);
function evt2(e){
txt='';
for(i in e.changedTouches[0]){
txt+='<div class="einfo">e.changedTouches[0].<a href="https://google.co.jp/search?q=javascript+event+'+i+'" target="_blank">'+i+'</a> : '+e.changedTouches[0][i]+'</div>';
}
info2.innerHTML=txt;
}
</script>
</p>
あとがき
とりあえず今回はclickとtouchstartについてのみでしたが、他のイベント（keydownとか）だとまた違った結果が出てきそうですね。
それでも、見慣れないものも多くて、検索結果を見にいくと「お、こんな事もできたのか！」って新たな発見に繋がったりもします^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
