menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

【JavaScript入門】イベント処理

  • Guide

【JavaScript入門】イベント処理

こんにちは(・∀・)

今日はJavaScriptのイベント処理について解説していきたいと思います。

イベント処理

イベントとはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗った、といった時などに発生します。

それらイベントが発生した時にJavaScriptで定義した関数を実行するのがイベント処理でイベントハンドラです。

イベントハンドラはHTMLのイベント属性で登録したり関数で登録することができます。

イベントハンドラ

イベントハンドラには次のような種類があります。

onabort
読み込みが中断したら
onerror
エラーが発生したら
onchange
状態が変化したら
onclick
クリックしたら
ondblclick
ダブルクリックしたら
onfocus
フォーカスしたら
onblur
フォーカスが外れたら
onkeydown
キーを押したら
onkeypress
キーが押されている間
onkeyup
キーが離れたら
onload
読み込みが完了したら
onunload
ページ移動、リロード、ウィンドウを閉じたら
onmousedown
マウスボタンが押されたら
onmouseup
マウスボタンが離れたら
onmouseover
ポインタがオブジェクトに重なったら
onmouseout
ポインタがオブジェクトから離れたら
onmousemove
ポインタがオブジェクト上を移動したら
onresize
リサイズしたら
onscroll
スクロールしたら
onselect
選択したら
onsubmit
内容を送信したら
onreset
リセットしたら
イベントハンドラの書き方

よくあるパターンが次のような、


<button type="button" id="button1" onclick="hoge1();">button1</button>
<script>
function hoge1(){
alert('test1');
}
</script>

記述の仕方です。

buttonをクリックすると関数hoge1()が実行されます。

Result

処理も直接タグに記述してしまう次のような書き方もあります。


<button type="button" id="button2" onclick="alert('test2');">button2</button>

どちらもHTMLのイベント属性で登録するタイプで、同じ結果が返ります。

Result

これらがHTML属性で登録するタイプのイベントハンドラです。

 

しかしHTMLとJavaScriptは切り離したいというのが今の時代の流れです。

じゃあその場合どうするのか⁉️


<button type="button" id="button3">button3</button>
<script>
document.getElementById('button3').onclick = function hoge3(){
alert('test3');
}
</script>

buttonタグからonclickイベントはなくなります。

Result

次のようにも書いても同じ結果が返ります。JavaScriptをhead内に書く必要がある場合はこうなります。


<script>
window.onload = function(){
document.getElementById('button4').onclick = function hoge4(){
alert('test4');
}
}
</script>
<button type="button" id="button4">button4</button>
Result

 


 

しかし、一つの要素に複数のイベントを登録すると...


<button type="button" id="button5">button5</button>
<script>
document.getElementById('button5').onclick = function hoge5a(){
alert('test5a');
}
document.getElementById('button5').onclick = function hoge5b(){
alert('test5b');
}
</script>
Result

最後に記述された関数が上書きされて表示されます。

 

複数のイベントを登録したい場合、addEventListenerを使用すれば上書きされずに全て実行されます。


<button type="button" id="button6">button6</button>
<script>
document.getElementById('button6').addEventListener('click', function hoge6a(event){
alert('test6a');
}, false);
document.getElementById('button6').addEventListener('click', function hoge6b(event){
alert('test6b');
}, false);
</script>
Result

次のような書き方でも同じ結果が返ります。


<button type="button" id="button7">button7</button>
<script>
function hoge7a(event){
alert('test7a');
}
function hoge7b(event){
alert('test7b');
}
var e = document.getElementById('button7');
e.addEventListener('click',hoge7a,false);
e.addEventListener('click',hoge7b,false);
</script>
Result

イベントリスナ関数を使用する上で注意点があります。イベントを登録する場合、例えばclickアクションのイベントを登録する場合、イベント属性ではonclickと指定しますが、イベントリスナの場合はclickとなります。他にもonsubmitはsubmit、onloadはloadとonを省略して記述します。

 


ちなみにjQueryだと...


<button type="button" id="button8">button8</button>
<script>
$('#button8').click(function(){
alert('test8');
});
</script>

こんな感じとか、


<button type="button" id="button9">button9</button>
<script>
$('#button9').on('click',function(){
alert('test9');
});
</script>

こんな感じの書き方でしたね。

Result

 


addEventListenerは複数のイベントがある時だけしか使わないというわけではありません。IEを気にする必要があった頃はattachEventと併用して使用していたaddEventListenerですが、IEを気にする必要がなくなった今、attachEventと併用するという手間も減ったので、イベントハンドラをaddEventListenerに置き換えていっても良いのかなと思います。


関連リンク

JavaScript入門
jQuery入門

  • カテゴリー:Guide