イベント操作する上で押さえておきたいポイント

「イベント発火時の処理を設定する方法」「イベント伝播の制御方法」など、JavaScriptによるイベント操作で押さえておきたいポイントについて紹介します。

イベントの種類

非常に多くのイベントが存在します。利用する機会がありそうなイベントを列挙します。

  • リソースイベント
    • load
    • unload
  • フォーカスイベント
    • focus
    • blur
  • トランジションイベント
    • transitionstart
    • transitioncancel
    • transitionend
    • transitionrun
  • フォームイベント
    • reset
    • submit
  • ビューイベント
    • resize
    • scroll
  • キーボードイベント
    • keydown
    • keypress
    • keyup
  • マウスイベント
    • click
    • dblclick
    • mouseenter
    • mouseover
    • mousemove
    • mousedown
    • mouseup
    • mouseleave
    • mouseout
  • ドラッグ & ドロップイベント
    • dragstart
    • drag
    • dragend
    • dragenter
    • dragover
    • dragleave
    • drop

詳しくは、https://developer.mozilla.org/ja/docs/Web/Events#Standard_events で確認できます。

イベント発火時の処理を設定

onclickプロパティの注意点

<input
  id='xxx'
  type="button"
  value="click"
  onclick='alert("Hello World")'>

上記のように、onclick などのイベントハンドラで処理を設定することができます。

const btn = document.getElementById('xxx')
btn.onclick = () => alert('Good Bye')

また、上記のように onclickプロパティ で処理を設定することもできます。

これらの書き方は、注意が必要です。なぜなら、ある要素の特定のイベントに対して、複数の処理を登録することができないからです。

以下に例を示します。

2箇所でイベントを登録していますが、clickボタン をクリックしてもアラートが1度しか表示されません。

addEventListenerでイベントを登録

今度は、 addEventListener でイベントを登録してみます。こちらの場合、複数のイベントを設定できます。

clickボタン をクリックして、アラートが2度表示されることを確認できます。

addEventListenerの使い方
下記ページで確認できます。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

イベントの実行を1回だけに限定するなどの調整も可能です。useCaptureについては後述します。
addEventListenerで登録したイベントリスナーを削除するには?

イベントオブジェクト

addEventListenerの第2引数に、イベント発生時に実行させたい関数を設定します。

btn.addEventListener(
  'click', 
  e => alert('Hello World'),
  false
)

関数の引数( e )には、イベントに応じたイベントオブジェクトが渡されます。以下のような、イベントオブジェクトが存在します。

  • KeyboardEvent
    • 押されたキー情報を格納したプロパティなどが存在します。
  • MouseEvent
    • マウスポインタの位置情報を格納したプロパティなどが存在します。
  • DragEvent

全て、Eventインターフェイスを継承しています。

イベント伝播

発生順序調整
( キャプチャリングとバブリング )

607-javascript-event-propagation.png

最下位のdiv要素をクリックすると、windowから順にイベントが伝播されます。そして、最下位のdiv要素のイベントが実行されたのち、今度は最上位にイベントが伝播されます。

上位から下位にイベントが伝播される段階をキャプチャリングといい、下位から上位にイベントが伝播される段階をバブリングと言います。

キャプチャリング

addEventListenerの 第3引数true を指定すると、キャプチャリングのときにイベントが実行されます。

キャプチャリングの動作を確認します。

innerクラスのdiv領域をクリックすると、 outer eventinner event1inner event2 の順でイベントが発火していることを確認できます。

バブリング

addEventListenerの 第3引数false を指定すると、バブリングのときにイベントが実行されます。

バブリングの動作を確認します。

innerクラスのdiv領域をクリックすると、 inner event1inner event2outer event の順でイベントが発火していることを確認できます。

伝播を停止(同一要素は実行)
( stopPropagation )

stopPropagationメソッド を実行すると伝播を停止させることができます。ただし、同一要素のイベントは実行します。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2
outer event ×
ブラウザ本来の挙動
( チェックボックスにチェックがつく )

伝播を停止(同一要素も停止)
( stopImmediatePropagation )

stopImmediatePropagationメソッド を実行すると伝播を停止させることができます。ただし、同一要素のイベントも停止します。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2 ×
outer event ×
ブラウザ本来の挙動
( チェックボックスにチェックがつく )

ブラウザ本来の挙動のみ停止
( preventDefault )

preventDefaultメソッド を実行するとブラウザ本来の挙動のみ停止させることができます。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2
outer event
ブラウザ本来の挙動
( チェックボックスにチェックがつく )
×

カスタムイベントの作成方法
( EventコンストラクタとdispatchEvent )

Eventコンストラクタ でオリジナルのイベントを作成することができます。
作成したイベントは dispatchEvent で発火させることができます。

参考

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。