menu
menu

キーワード検索

 

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

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

【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
リセットしたら
イベントハンドラの書き方

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


<a id="button1" href="javascript:void(0)" onclick="hoge1(); return false;">button1</a>
<script>
function hoge1(){
alert('test1');
}
</script>

記述の仕方です。

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

Result

または、


<button id="button2" onclick="hoge2();">button2</button>
<script>
function hoge2(){
alert('test2');
}
</script>

記述の仕方です。

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

Result

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


<button id="button3" onclick="alert('test3');">button3</button>

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

Result

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

 

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

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


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

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

Result

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


<script>
window.onload = function(){
document.getElementById('button5').onclick = function hoge5(){
alert('test5');
}
}
</script>
<button id="button5">button5</button>
Result

 


 

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


<button id="button6">button6</button>
<script>
document.getElementById('button6').onclick = function hoge6a(){
alert('test6a');
}
document.getElementById('button6').onclick = function hoge6b(){
alert('test6b');
}
</script>
Result

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

 

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


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

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


<button id="button8">button8</button>
<script>
function hoge8a(event){
alert('test8a');
}
function hoge8b(event){
alert('test8b');
}
var e = document.getElementById('button8');
e.addEventListener('click',hoge8a,false);
e.addEventListener('click',hoge8b,false);
</script>
Result

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

 


ちなみにjQueryだと...


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

こんな感じとか、


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

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

Result

 


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


関連リンク

JavaScript入門
jQuery入門

  • カテゴリー:Guide