スポンサーリンク

【JavaScript】イベント、イベント発火、イベントリスナーつまりはどういうこと??

皆さんこんにちは!
のむ(@nomu_engineer)です!

今回の記事では、JavaScriptのイベントに関することをまとめてみました!
イベント、イベント発火、イベントリスナー、イベントハンドラー、などなど一体全体どんだけイベントが好きなのってくらい出てくるので、イベントについてまとめました。笑

この記事を読むメリット
・イベントについて理解できる
・イベント発火について理解できる
・イベントリスナとイベントハンドラーの違いを理解できる

この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア
・JavaScript勉強始めたばかりの方

それでは早速イベントの説明から入っていきます。

イベントとは

JavaScriptにおいてのイベントとは、カリキュラムではHTMLに対して行われた処理の要求のこと、と書いてありました。
僕は賢いので、説明だけでは理解することができませんでした。笑

ウェブページ上で発生するあらゆるアクションのことです。

つまるところどういうことなのかというと、「ユーザーがサイトのボタンをクリックした。」←これがイベントということになります。
ユーザーがサイトに関して何か要求をしてきたというのがイベントです。

イベントはたくさん種類がありますが、今回はその中でも下記のイベントを紹介します。

・loadイベント
 ・・・ページ全体が読み込まれるというイベント


・clickイベント
 ・・・指定された要素がクリックされるというイベント


・mouseoverイベント
 ・・・マウスのカーソルが指定して要素の上に乗るというイベント


・mouseoutイベント
 ・・・マウスのカーソルが指定した要素の上から外れるというイベント

イベント発火とは

上記で定めているイベントを認識して、メソッドが動き出すことをイベント発火と言います。

クリックされたら、クリックした箇所の色が変わるという関数を定めておきます。
クリックされたら、クリックした箇所の色を変更するようにプログラムが動き出します。

この、プログラムが動き出すということがイベント発火になります。

イベントリスナーとは

イベントリスナーとは、イベント発火の際にそれに対応して発動させる処理のことです。

イベント発火の際に使った例を使うと、クリックされたら、クリックした箇所の色が変わるという関数のを発動することです。

イベントが起きた際に、それに対して、対応する処理を発動することをイベントリスナーと言います。

イベントリスナーを定義するメソッドがaddEventListenerメソッドです。
このメソッドを使うことで、イベント発火の際に使用する関数(イベントリスナ)を登録することができます。

それでは早速実際にコードを書いて、説明していきたいと思います。

pullDownButton.addEventListener("mousover", function(){
  console.log("mouseover OK")
})

addEventListenerメソッドは上記のように記述します。
一つ一つ、意味を説明ていきます。

まずpullDownButtonについて。
ここは毎回記入する文字は変わってきます。

ここにはHTMLに指定してる、要素を記述します。
どこで起こるイベントに対して、イベントリスナーが発動されるかの場所の特定です。

今回は、適当にpullDownButtonとさせていただきましたが、HTMLから取得した要素を記述します。
要素の取得の仕方はまた別で記事を紹介したいと思います。

次にmouseoverについて。
ここにはイベントを記述します。

先述した4つのイベントなどがここには入ります。

function以降は関数の定義の仕方のnoteで紹介しているのでそちらを参考にしてみてください。

・JavaScript関数定義について

上記のイベントリスナーのコードは、「pullDownButton」というHTMLの要素からマウスのカーソルが外れた時に、「mouseover OK」という文字が出力される処理が行われるコードになっています。

イベントハンドラについて

JavaScriptで記述された、イベントに対して特定の処理を与える命令のことです。

つまり、イベントが発生した時に呼び出される処理のことです。
上記のコードでいうと、下記の部分になります。

console.log("mouseover OK")

なんだかイベントリスナーとものすごく似ている気がしませんか??

僕も学習中にいきなりイベントハンドラが出てきて、「それってイベントリスナーじゃね?」って困惑したのを覚えています。

その困惑を無くすためにもこの二つの違いについて説明をして、この記事をまとめたいと思います。

イベントハンドラ・・・イベントを捕捉し処理する関数。
イベントリスナー・・・イベントにイベントハンドラを紐付ける仕組み。

このように細かく見ると二つの意味は違ってきますね。

要するに、イベントリスナーを使って、イベントに対する処理(イベントハンドラ)を定義してくということです。

イベントリスナーの中には、イベントハンドラは一つしか書けないということは決まっておらず、複数個のイベントハンドラを記述することができます。

最後に

以上でイベント、イベント発火、イベントリスナー、イベントハンドラについての説明を終わりてたいと思います。

まとめると、

イベント
 ・・・HTMLに対して行われる何らかの処理の要求のこと


イベント発火
 ・・・イベントに対して、定められたメソッドが動き出すこと


イベントリスナー
 ・・・イベントとイベントハンドラーを紐付ける仕組みのこと


イベントハンドラ
 ・・・イベントに対して、処理する関数のこと

以上になります!
JavaScriptはイベントがどうも大好きみたいなのでぜひ抑えておきましょう!!

ありがとうございました。

スポンサーリンク




この記事を書いた人