このボタンにマウスをポチった時にボタンが下がる・戻るコードを勉強したいと思います。
前回の星座を乱数で表示するコードの下に
- ボタンが下がる←mousedown
- ボタンが戻る（上がる）←mouseup
この動作をするコードを書いていきます。
<script>
(function(){
"use strict";
document.getElementById('btn').addEventListener('click',function(){
var results=['牡羊座','牡牛座','双子座','山羊座','乙女座','水瓶','天秤座','蟹座'];
var result= Math.floor(Math.random() * results.length);
document.getElementById('result').innerHTML= results[result];
});//↓ココから
document.getElementById('btn').addEventListener('mousedown',function(){
this.className='pushed';
});
document.getElementById('btn').addEventListener('mouseup',function(){
this.className='pushed';
});
})();
</script>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
addEventListenerは
DOM（要素にアクセスする仕組み）的にイベントを登録する（イベントが起こったとき関数が動くようにする)。
頭でclickした時に起こる流れが上から書かれています。
'mousedown',function(){
this.className='pushed';
もしmousedownだけだと、ボタンは下がったまま元に戻りません。
addEventListener('mouseup',function(){
this.className='pushed';
でもmouseupを同時に宣言することでクリックした後ボタンがまた上に戻ることができます。
人間の感覚だと、普段自分が使う分にはボタンを押しても押しっぱなしなので戻すことは考えないと思うのですが、１つ１つを指示してあげないとコンピューターは動いてくれないんですね。。
（まだこの感覚に全然慣れません！）
なんとなくサンプルコードを写していたのを最近はこうして細分化して色々勉強するようにしてます。１つ１つ調べていくととても時間がかかって面倒なんですが腑に落ちる感覚を味わえて、充実感はあります。
Javascriptも勉強することが多すぎてRubyやPHPが手を出せない。。
