Javascriptの醍醐味は、イベントによる動的な処理を実行するプログラミングです。
サンプルコードも一緒に掲載しているので、自分で書いて、少し変えて確認する事で、理解と学習につながるでしょう。
数多くイベントの種類を覚えるほど、Javascriptで出来る事、表現の幅が広がるので、たくさん理解してスキルアップしましょう。
Javascript学習 : イベント編
- onイベント : load , click , focus , blue
- イベントの設定方法
- マウス操作系イベント
- キーボード操作系イベント
- スマホ操作系イベント
- formタグのイベント処理
- onloadとDomContentloaded
- 注意点 : ページ読み込みとDom
onイベント : load , click , focus , blue
onイベントは、HTMLタグに直接記述できるモノが多いので、手軽にHTMLタグの属性として書き込んで実装できます。
そして、種類も豊富で、特性の理解もしなければいけませんが、使い慣れないと覚えきれないでしょう。
イベントの設定方法
javascriptでのイベント設置は、大きく分けて２パターンあります。
１つ目は、HTMLタグに直接属性として書き込む方法で、次のように書くことができます。
<body onload='javascript記述'>
...
</body>
このサンプルコードは、ページの読み込みが完了してからjavascriptを実行させることが出来るイベントです。
２つ目のイベント設置方法は、Javascript内で要素に対して設置する方法です。
const elm = document.querySelector('div.sample')
// パターン1
elm.onclick = function(){console.log('click!!!')}
// パターン2
elm.addEventListener('click' , function(){console.log('click!!!')})
上記は、clickイベントを２つの書き方で書いていますが、
どちらも同じ処理が実行されます。
この書き方の違いは、onイベントで書く設置方法は、１つのイベントしか設置できませんが、
addEventListenerで設置すると、
複数のイベントを１つの要素に対して設置できるようになります。
ページ系イベント
onload
ページの読み込み完了や、imgやscriptなどのデータの読み込み完了のタイミングで処理を実行することができます。
document.body.onload = function(){console.log("loaded")}
ただし、注意点としては、既に読み込みが完了している場合、このイベントは後で書いても処理は実行されません。
onunload / onbeforeunload / onhidepage
ページから離れる時に発生するイベントです。
onunloadとonbeforeunloadの違いは、
onbeforeunloadは、キャンセルが可能なイベントで、ダイアログが表示されてキャンセルすることができます。
入力フォームなど書きかけの項目がある場合に、確認をする場合に使うのが効果的です。
window.onunload = function(){
window.open()
}
onunloadは、キャンセルができないイベントで、iframeなどに使うのが効果的です。
ビジネス用のホームページで、離脱防止として使う事もできます。
他にも、onhidepageという似たような機能もあります。
ここまで書いておいて申し訳ありませんが、このunload機能は、ブラウザのセキュリティ制御や、関数内部での機能しない関数、ブラウザ別に書き方や、処理方法が違う事があります。
また、リロードボタンや、submit、普通のリンクなどでも発動してしまうため、公開ページでの安定した動作が見込めないので、
あまり使わない方がいいでしょう。
onDomContentLoaded
onloadと似ていますが、ページのDom構造（HTMLデータ）が読み込まれた段階で発火（イベント発動）します。
onloadは、ページ内のHTMLに書かれているコンテンツ（imageやscriptやlinkなどに書かれている外部ファイル）の読み込みが全て終わった段階で発火しますが、
onDomComtentLoadedは、HTMLの読み込みだけなので、javascriptが実行し始めるのは、
このタイミングが最適と考えていいでしょう。
window.onDomContentLoaded = function(){
...
}
window.addEventListener("DomContentLoaded" , function(){
...
})
onresize
インターネットブラウザの画面（ウィンドウ）サイズが変わった時に発火します。
パソコンのインターネットブラウザの画面フルサイズにしたり、ウィンドウサイズを変えた場合、
スマートフォンで縦表示（Vartical)から、横表示(Horizontal)に変更した時などが、イベント対象です。
window.onresize = function(){
...
}
window.addEventListener("resize" , function(){
...
})
レスポンシブデザインなどと連動すると、安定した画面サイズでの挙動が保てるでしょう。
onscroll
画面や、iframe、スクロールコンテンツが、スクロールをする度に発動するイベントです。
使用している端末のcpu処理によって、タイミングは様々ですが、１回のスクロールという単位ではなく、スクロールはピクセル単位で発火します。
window.onscroll = function(e){
console.log(document.scrollingElement.scrollTop)
}
上記を設置すると、スクロールの値が、Javascriptコンソールに書き出されます。
イベントの発火するタイミングが目で見て確認できます。
ちなみに、画面のスクロールの値を取得する場合は、document.scrollingElement というシステム要素から取得します。
onpopstate
ブラウザの戻るボタンや進むボタンを押した時に、イベントが発動します。
通常はページが切り替わってしまうので、unloadなどと同じ様にイベントを処理するのは難しいですが、
ページ内リンク（ハッシュリンク）などを使うと、情報が取得できて処理することが出来るようになります。
history.pushState()という命令で、url履歴を追加できるので、この処理と組み合わせると、実際にページを読み込み直さずにクエリやハッシュ情報などを変更することができます。
<h1>popstate</h1>
<a href='#1'>#1</a>
<a href='#2'>#2</a>
<script>
history.pushState({},'' , '#3')
window.onpopstate = function(e){
console.log(e)
}
</script>
マウス操作系イベント
マウスのクリックや、カーソル移動など、細かなイベントが取得できます。
パソコンでの操作を動的に行えるイベント操作ができるので、マウスイベントの特性を理解しておきましょう。
onclick / ondblclick / contextmenu
ボタンに設置するだけじゃなく、あらゆる要素に設置して使うことができます。
ユーザーにクリックしてもらいたい場合は、cssのcursor:pointerを設置して、クリックできる箇所を表示するなど、お決まりコードもあるので、是非下記慣れておきたいonイベントです。
window.onclick = function(e){
console.log(e.target)
}
上記のサンプルコードは、ページ内のどこかの場所をクリックした時に、クリックした場所にあるタグ要素が取得できるようになります。
ちなみに、ダブルクリック用のイベントが、ondblclickです。
window.ondblclick = function(e){
console.log(e.target)
}
右クリックは、oncontextmenuでイベント取得ができます。
// 右クリックした時に、メニュー表示をしないようにする
document.contextmenu = function(){return false}
onmousedown / onmouseup
マウスボタンを押した時のそれぞれのタイミングが取得できます。
このイベントを利用して、要素をドラッグして動かしたり、クリックされるボタンの状態を細かく取得することが可能になります。
onmousedown : マウスのボタンを押した時（押し込んだ時）
const button = document.querySelector("button")
button.onmousedown = function(e){
// ボタンを押した時の処理
// ボタンを押した場所の座標が取得できる。
const position = {
x : e.pageX,
y : e.pageY,
}
}
onmouseup : マウスボタンを押した状態からボタンを開放した時（押し込みを開放した時）
const button = document.querySelector("button")
button.onmousedown = function(e){
// ボタンを押した状態から開放した時の処理
// 座標の取得できる。
const position = {
x : e.pageX,
y : e.pageY,
}
}
onclickは、onmouseupの後に発動します。
イベントの発生タイミングの違いを理解して使い分けましょう。
onmousemove
onmousemove : マウスを動かした時のイベントが取得できます。
const element = document.querySelector(".target-element")
element.onmousedown = function(e){
// マウスを動かした時の処理
// 座標の取得できる。
const position = {
x : e.pageX,
y : e.pageY,
}
}
mouse-down,mouse-upなどと組み合わせると、マウスのボタンを押したままの移動や、ボタンを押していない時の移動などを区別させることができます。
onmouseover / onmouseout / onmouseleave
マウスカーソルが、対象とする要素と重なったり、離れたりしたイベントが取得できます。
キーボード操作系イベント
パソコンのキーボードや、スマホのソフトキーボードなどのイベントが取得できます。
onkeydown
キーボードのキーが押された時にイベント取得できます。
keydownのタイミングで、文字は表示されている状態です。
// 入力項目個別にイベント取得する
document.querySelector(`input[name='username']`).addEventListener('keydown' , function(e){
console.log(`入力した文字は、${e.key}`);
console.log(`入力した文字コードは、${e.keyCode}`);
})
// windowにセットすると、ページ内の全てのキーボード操作イベントが取得できる。
window.addEventListener('keydown' , function(e){
console.log(`入力した文字は、${e.key}`);
console.log(`入力した文字コードは、${e.keyCode}`);
})
onkeyup
キーボードが押されている状態から開放された時のイベントが取得できます。
通常入力が確定するのは、keyupの時と判断するため、keydownとkeyupは厳密に分けてイベント処理がされます。
// 入力項目個別にイベント取得する
document.querySelector(`input[name='username']`).addEventListener('keyup' , function(e){
console.log(`入力された文字は、${e.key}`);
console.log(`入力された文字コードは、${e.keyCode}`);
})
// windowにセットすると、ページ内の全てのキーボード操作イベントが取得できる。
window.addEventListener('keyup' , function(e){
console.log(`入力された文字は、${e.key}`);
console.log(`入力された文字コードは、${e.keyCode}`);
})
onkeypress
keydownに似てますが、shiftやcontrol、optionなど、文字が表示されない入力の場合、keypressのイベントは発動しません。
また、日本語入力では、変換を伴うため、正常にキー入力を取得することができません。
// 入力項目個別にイベント取得する
document.querySelector(`input[name='username']`).addEventListener('keypress' , function(e){
console.log(`入力された文字は、${e.key}`);
console.log(`入力された文字コードは、${e.keyCode}`);
})
文字の入力を安定したイベント取得したい場合は、oninputを使うのがいいでしょう。
スマホ操作系イベント
スマートフォン特有のイベントで、画面にタッチした時のイベント取得ができます。
マウスイベントと同じで、押して、動かして、離して、という一連のイベントは似ています。
でも、取得する値にクセがあるので、仕様を理解しておきましょう。
取得したイベント(下記のサンプルでは、e）のtouchesという配列に、タッチした指の数分の情報が格納されています。
その中は、マウスイベントとほぼ同じなので、ネストが一階層深いので、間違わないように注意しましょう。
ontouchstart
画面に触ったタイミングでタッチスタートイベントが取得できます。
// 特定のタグに対してのタッチイベントを取得
document.querySelector('canvas').ontouchstart = function(e){
// タッチした座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
// 画面全体のイベントを取得
window.ontouchstart = function(e){
// タッチした座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
ontouchmove
多面をタッチしている状態で、指を動かしたイベントが取得できます。
// 特定のタグに対してのタッチイベントを取得
document.querySelector('canvas').ontouchmove = function(e){
// タッチしている座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
// 画面全体のイベントを取得
window.ontouchmove= function(e){
// タッチしている座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
ontouchend
画面から手を話したタイミングのイベントが取得できます。
// 特定のタグに対してのタッチイベントを取得
document.querySelector('canvas').ontouchend = function(e){
// 手を離した座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
// 画面全体のイベントを取得
window.ontouchend= function(e){
// 手を離した座標を取得
console.log(e.touches[0].pageX, e.touches[0].pageY)
}
Form系イベント
入力フォームのイベントは、ページ内の情報を登録するようなサイトでは、必須のイベント処理になります。
onfocus / onblur
入力項目が入力可能状態担った場合は、focus。
focusの後、入力項目から離れた場合は、blurというイベントが取得できます。
<input type="text" name="test_focus_blue" />
<div id="test_focus_blue"></div>
<script>
const input = document.querySelector(`input[name='test_focus_blue']`)
const message = document.getElementById("test_focus_blue")
input.onfocus = function(){
console.log("入力できます")
message.textContent = "入力できます"
}
input.onblur = function(){
console.log("入力項目から離れました")
message.textContent ="入力項目から離れました"
}
</script>
このイベントは、inputタグ以外にも、selectタグや、textareaタグにも動揺に使えます。
onchange / oninput
selectタグで、リストの選択を変更した場合や、inputタグの入力文字を変更した場合に、changeイベントが取得できます。
onchangeは、入力を終えて、onblurと同じ（項目から離れた）タイミングで、イベント取得ができ、
oninputは、1文字ごとの入力でイベントが取得できます。
onchange :
oninput :
<div id="message_oninput"></div>
oninput : <input type="text" name="test_oninput" />
<script>
const input_onchange = document.querySelector(`input[name='test_onchange']`)
input_onchange.onchange = function(e){
const message_onchange = document.getElementById(`message_onchange`)
message_onchange.textContent = `入力された文字 : ${e.target.value}`
}
const input_oninput = document.querySelector(`input[name='test_oninput']`)
input_oninput.oninput = function(e){
const message_oninput = document.getElementById(`message_oninput`)
message_oninput.textContent = `入力された文字 : ${e.target.value}`
}
</script>
onsubmit
formタグが設置されている場合、入力項目の文字列一式をまとめてサーバーに送ることができる、submit処理のタイミングでイベントが取得できます。
submitイベントのあとは、ページが遷移されるので、このonsubmitイベントでは、入力項目が適切かどうかを判定して、不適切な場合はsubmitさせないようにする処理が実行できます。
<form name='test_onsubmit'>
<input type='text' name='input_onsubmit' /><button type='submit'>送信</button>
</form>
<script charset='utl-8'>
const form = document.forms.test_onsubmit
form.onsubmit = function(){
const input = document.querySelector("input[name='input_onsubmit']")
alert(`入力された文字 : ${ input.value}\nこの処理はsubmitされずにキャンセルされます`)
return false
}
</script>
oncopy / onpaste / oncut
文字入力をするタグの場合に、コピペのイベントが取得できます。
<blockquote id='message_copy_paste_cut'></blockquote>
<input type='text' name='input_copy_paste' placeholder='文字をコピペしてください。'/>
<script>
const input_copy_paste = document.querySelector(`input[name='input_copy_paste']`)
input_copy_paste.oncopy = function(e){
console.log(e)
document.getElementById('message_copy_paste_cut').textContent = 'コピーしました'
}
input_copy_paste.onpaste = function(e){
console.log(e)
document.getElementById('message_copy_paste_cut').textContent = 'ペーストしました'
}
input_copy_paste.oncut = function(e){
console.log(e)
document.getElementById('message_copy_paste_cut').textContent = 'カットしました'
}
</script>
onselect
文字入力の項目で、カーソルで選択されたイベントが取得できます。
また、選択された文字列も取得することで、色々な活用方法ができます。
<blockquote id='message_select'></blockquote>
<input type='text' name='input_select' value='文字を選択してください。'/>
<script>
document.querySelector(`input[name='input_select']`).onselect = function(e){
console.log(e)
document.getElementById('message_select').innerHTML = '選択した文字は : <span style="color:red">'+ document.getSelection() +'</span>'
}
</script>
メディア系イベント
videoやaudioなどのメディア・コンテンツで取得することができるイベントを使い方や特性を理解しておきましょう。
onloadstart
メディアソースの読み込みが開始した時のイベントです。
document.getElementById('contents').onloadstart = function(e) {
console.log(e)
}
onprogress
データソースの読み込み途中の進行状況をイベント取得できます。
document.getElementById('contents').onprogress = function(e){
console.log(e)
}
onsuspend
データソースの読み込みを中断した時のイベント。
document.getElementById('contents').onsuspend = function(e){
console.log(e)
}
onemptied
データソースの読み込みを中断した時のイベント。
document.getElementById('contents').onemptied = function(e){
console.log(e)
}
onerror
データソースの読み込みエラーが発生した時のイベント。
document.getElementById('contents').onerror = function(e){
console.log(e)
}
onloadeddata
データの初回フレームのデータが読み込まれたイベント。
※フレーム分析など行う場合、このイベントでデータ処理ができます。
document.getElementById('contents').onloadeddata = function(e){
console.log(e)
}
onloadedmetadata
データが全て読み込まれたイベント。
document.getElementById('contents').onloadedmetadata = function(e){
console.log(e)
}
oncanplay
データの再生が可能になった状態のイベント。
document.getElementById('contents').oncanplay = function(e){
console.log(e)
}
oncanplaythrough
読み込み完了を自動計算して、遅延なく再生ができると判断された状態のイベント。
document.getElementById('contents').oncanplaythrough = function(e){
console.log(e)
}
onplay
メディアの再生がされた時のイベント。
document.getElementById('contents').onplay = function(e){
console.log(e)
}
onplaying
メディアが再生中の時のイベント。
document.getElementById('contents').onplaying = function(e){
console.log(e)
}
ontimeupdate
再生しているメディアの、再生位置（現在位置）が更新された時のイベント。
document.getElementById('contents').ontimeupdate = function(e){
console.log(e)
}
onpause
メディアの再生が一時停止された時のイベント
document.getElementById('contents').onpause = function(e){
console.log(e)
}
onended
メディアの再生が終了した時のイベント
document.getElementById('contents').onended = function(e){
console.log(e)
}
ondurationchange
メディアの再生時間が変更された時のイベント。
document.getElementById('contents').ondurationchange = function(e){
console.log(e)
}
onwaiting
メディアの読み込みが間に合わず、待ち状態の時のイベント。
document.getElementById('contents').onwaiting = function(e){
console.log(e)
}
onseeking
メディアをシークしている時のイベント。
document.getElementById('contents').onseeking = function(e){
console.log(e)
}
onseeked
メディアのシークが完了した時のイベント。
document.getElementById('contents').onseeked = function(e){
console.log(e)
}
onratechange
メディアの再生速度が変わった時のイベント。
document.getElementById('contents').onratechange = function(e){
console.log(e)
}
onvolumechange
メディアの音量が変わった時のイベント。
document.getElementById('contents').onvolumechange = function(e){
console.log(e)
}
注意点 : ページ読み込みとDom位置
要素に対してイベントを設定する時に、ページのDom構造が読み込まれている必要があります。
失敗例
次のような場合は、エラーになります。
<html>
<head>
<script>
const message = document.getElementById('message')
message.textContent = 'メッセージを表示'
</script>
</head>
<body>
<div id='message'></div>
</body>
</html>
成功例1
単純に、セットする要素よりも後ろにscript記述がされていれば、エラーにはなりません。
<html>
<head>
</head>
<body>
<div id='message'></div>
<script>
const message = document.getElementById('message')
message.textContent = 'メッセージを表示'
</script>
</body>
</html>
成功例2
headタグ内に書いて、要素の読み込み後に実行させるには、次のようにします。
<html>
<head>
<script>
window.onDomContentLoaded = function(){
const message = document.getElementById('message')
message.textContent = 'メッセージを表示'
}
</script>
</head>
<body>
<div id='message'></div>
</body>
</html>
微妙パターン
外部jsファイルを読み込む時に、async属性を付けている場合、HTMLのDOM読み込みと、javascriptファイルの読み込みのどちらが先に完了するか、不明になる場合があります。
<html>
<head>
<script src='message.js' async></script>
</head>
<body>
<div id='message'></div>
</body>
</html>
この場合は、外部jsファイルの中で、onloadまたは、onDomContentLoadedのイベントをちゃんと処理して実行すれば、問題ありません。
