2016/09/02 15:21:42

javascriptのEventListenerの基礎知識

目次(クリックするとジャンプします)
  • 1:基礎知識
  • 1.1:イベントとはなにか
  • 1.2:イベントの制御
  • 1.3:イベントリスナー(EventListener)
  • 2:まとめ

基礎知識

イベントとはなにか

イベント(Event)とは「クリックされた」「キーが押された」「ある領域にカーソルが入った」「windowのサイズが変更された」等々さまざまな「事態」ことです。

ユーザーが起こすイベントばかりではなく、たとえば「ページが読み込まれた」「DOMが構築された」「通信が完了した」等のシステム上の「事態」もイベントとなります。

使えるイベントの数はとても多く、全てを把握するのはとても大変ですが、イベントをうまく使うと複雑できめの細かい処理も可能になります。 もしイベントの種類を確認したいなら、以下のページを参照するといいと思います。

MDN-Webtechnologyfordevelopers-Event reference(英語)
https://developer.mozilla.org/en-US/docs/Web/Events

イベントの制御

マウスがクリックされたとか、キーが押されたとかの制御、つまりイベントの制御の多くはシステムの仕事なので、イベントが起きたことは(間接的な場合もあるが)システムから知らされるようになっています。

だからイベントの発生(発火などとも言う)に関しては関知する必要はないです。システムがイベントの発生を「伝えてくる」のを待つだけでいいです。

イベントが起きたら処理を行うので、こういった処理のことをイベント駆動(event-driven)などと呼びます。

イベントリスナー(EventListener)

やっと本題にはいますが、イベントリスナーとはシステムからイベントが発生したメッセージを受け取る為の機能です。

イベントリスニングにはターゲットが必要となります。イベント発生元と言った方が判りやすいだろうか。webならDOMがターゲットになる事が多いです。たとえば<div>とか、<p>に対してとか、#hoge、.hogeなどのID、Classなどに対して、windowやdocumentなどに対してなどです。

これらのターゲットになんらかの「事態」、つまりイベントが起きたときになにか処理を行いたい場合には、ターゲットにイベントが起こったこと知らなけばなりません。

先ほど説明したようにイベントは(間接的にでも)システムから「伝えられる」ので、それを「聞く」必要があります。その為にイベントリスナーをターゲットにくっつけるのです。

<div id=”hoge”>クリックしてね</div>

という要素があったとして、この要素がクリックされたら何らかの処理をするという場合を想定するなら、下記のようになります。

document.getElementById("hoge").addEventListener( "click" , function(){ //なんらかの処理 } );

addEventListener

#hogeに起きるだろうclickイベントをリスリングするようにしています。#hogeがclickされると、システムからfunction(){ //なんらかの処理 } が呼び出されて処理されます。

ターゲットには何個でもイベントリスナーをくっつけることができます。

たとえば#hogeがクリックされた場合、カーソルが上に乗った場合、カーソルが外れた場合それぞれにイベントリスナーをくっつけることができるということです。

document.getElementById("hoge").addEventListener( "click" , function(){ //なんらかの処理 } );
document.getElementById("hoge").addEventListener( "mouseover" , function(){ //なんらかの処理 } );
document.getElementById("hoge").addEventListener( "mouseout" , function(){ //なんらかの処理 } );

まとめ

イベントリスナーの仕組みをなるべく簡単に伝えられるように頑張ってみたが、ちょっと内容不足でしょうか?

@MINOがイベント駆動の勉強をするとき、あまり突っ込んだ説明だと理解が難しかったので今回はあっさり目の記事にしてみましました。もちろんこの記事だけの内容ではコードを書けるようにはならないと思いますが、仕組みについては理解していただけたら幸いです。

どうでもいいことですが、システムから「声を掛けられる」ようなイメージなので「聴く人」「リスナー」なんだろうな。なんだかイメージ的にはviewとかでもいいような気がしますが、@MINOは英語ができないのでわからないです。