こんにちは。
JavaScriptさわってみる企画9回目です。今回のテーマはイベントハンドラ。なんだかかっこいい名前ですね。ゲームだったらきっと魔法か重要なキーアイテムって印象です。
実際かなり重要な奴っぽいですよ。
イベントっていうのはマウスが動かされたりクリックされたり、画像が読み込まれたりするアクションのことを指していて、このアクションに対して処理を行う関数をイベントハンドラと呼ぶそうです。
つまり画面上でマウスが動かされたりボタンを押したりなど「○○したときに△△する」って処理を作れるってことです。そりゃすごい。(∩´∀｀)∩
いちおうボタンを押したときに画像を変えるってやつは前にやったことがありますが他にもできるんですね。
まずは免責っと。
※この記事は初心者が”やってみた”というだけの内容なので何の保証もありませんし間違っていたとしても責任も負えません。ご了承ください。
それではやってみましょう。マウスを動かしたとき、クリックしたときにその座標を表示する、というものです↓
<style>
#area {
background-color:black;
width:400px; height:300px;
margin-top:0px
}
#posi {
background-color:yellow;
width:400px;
margin: 0px; padding:0px;
}
#posi2 {
background-color:lightgreen;
width:400px;
margin: 0px; padding:0px;
}
</style>
<script>
window.onload = function () {
document.getElementById("area").onmousemove = presentposition;
document.getElementById("area").onclick = clickedposition;
}
function presentposition(e) {
document.getElementById("posi").textContent =
"マウス座標 X=" + e.offsetX + ", Y=" + e.offsetY;
}
function clickedposition(e) {
document.getElementById("posi2").textContent =
"クリックした座標 X=" + e.offsetX + ", Y=" + e.offsetY;
}
</script>
今回はCSSも記述してます。<style></style>で囲まれた部分。HTML要素を指定してそこを処理の対象とするため、まずはそのためのエリアを作成しているのです。
#○○{} と書くとidが○○の要素のデザインを変えることができます。処理の対象としているのはidが”area”のp要素。body部分に下記を加えて対象要素を作成します。
<p id="posi" >マウス座標</p>
<p id="posi2" >クリックした座標</p>
<p id="area">
</p>
実行結果↓↓(ブラウザによってはうまく行かないかも)
下の黒い部分でマウスを動かすかクリックすると座標が表示されます。スマホとかの場合はタップのみです。
マウス座標
クリックした座標
<script></script>で囲まれた部分がJavaScriptでしてwindow.onloadはページが読み込まれたときに処理が行われます。ここでマウスを動かしたとき(.onmousemove)とクリックしたとき(.onclick)のイベントハンドラをセットしています。それぞれの処理がpresentpositon(e) とclickedpositon(e) 。引数はブラウザが自動でセットするそうです。
e.offsetXとe.offsetYが要素の左上を原点としたマウスの座標(px)を取得する呪文。idが”posi”と”posi2”の要素の文字を書き換えています。他にも画面の左上を原点とするもの(screenX/screenY)やウインドウの左上を原点とするもの(pageX/pageY)もあります。
今回使ったonmousemove やonclick以外のイベント参考↓
なんかいろいろできそうな気がしてきましたね！
今回はここまでです。ありがとうございました。
次回↓icedtomatobazooka.site
らくがき。
仕上げてませんがここまでで思った感じにならなかったので止まってます(・∀・)
