【JavaScript】入門2. イベント処理

こんにちは（・∀・）

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

イベント処理

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

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

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

イベントハンドラ

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

イベントハンドラの書き方

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

<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(){
alert('test7a');
}, false);
document.getElementById('button7').addEventListener('click', function hoge7b(){
alert('test7b');
}, false);
</script>

Result

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

<button id="button8">button8</button>
<script>
function hoge8a(){
alert('test8a');
}
function hoge8b(){
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入門