LoginSignup
@sayaka225

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

関数内の引数(event)の意味が分からない

Q&A

Closed

JavaScript初心者

関数内の引数(event)の意味が分からない

現在javascriptのコールバック関数を勉強しているのですが、解説サイト内で下記のような記述がでてきました。

function callback(event) {
  console.log('Hello'!);
}

document.querySelector('.my-button').addEventListener('click', callback);

一行目の引数eventを削除しても動くので必要ないのではと思ったのですが
こう記述するのが慣例なのでしょうか？
それとも必須の記述なのでしょうか？

初歩的な質問で大変恐縮なのですが教えていただけるとありがたいです。
よろしくおねがいいたします。

自分で試したこと

  • 引数eventを別の名前に置き換えてみた→動作した
  • 引数eventを削除してみた→動作した
0 likes

3Answer

OyaTomo
@OyaTomo

　まあ確かに動くことは動きますが、たまに取得したイベントオブジェクトを使いたい時があるんですよ。
　その時に使うので、取得します。

0Like

Comments

  1. @sayaka225

    Questioner

    回答いただきありがとうございます！
    今回の場合だとclickイベントがcallbackの引数に渡されるということになるのでしょうか・・・仮にそうだとしてもeventがどういう挙動をしているのか頭の中でうまく咀嚼できなくて・・・もう少し詳しくお聞かせいただけると幸いです。
github0013@github
@github0013@github

listener
指定された種類のイベントが発生するときに通知 (Event インターフェースを実装しているオブジェクト) を受け取るオブジェクト。これは、 EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数でなければなりません。

0Like

Comments

  1. @sayaka225

    Questioner

    回答いただきありがとうございます！
    addEventListenerで調べればよかったのですね💦

    .my-buttonをclickするとその情報がeventオブジェクトに格納される。
    実行されるcallback関数がそのeventオブジェクトを使って何か処理すること（removeする等）があるかもしれないから念のため引数にeventの記述があるとよいという解釈であってますでしょうか？？

  2. @github0013@github

    ま、使わないならevent引数を書かなくてもいいですけどね。必要になれば書けばいいと言えば良い。

    でも、callback関数の型として覚えておくためにいつも書いておいたほうが、精神安定上良いかもしれません。

    因みに引数名はこの場合何でも構いません。

    ```js
    function callback(nandemoEvent) {
    console.log("nandemoEvent", nandemoEvent);
    }

    // とか

    function callback(e) {
    console.log("e", e);
    }
    ```

    通常は自分が後から見て分かり易い名前がいいですが。

  3. @sayaka225

    Questioner

    引数eventは受け取ったeventの内容を使うときだけでなく使わない時でもcallbackの基本構文として書いておいたほうが精神衛生上良いかもしれないということですね。

    しっくりきました！
    意味不明な質問だったかもしれませんが丁寧に解説していただき理解が深まりました。ありがとうございました！
STSynthe
@STSynthe

JavaScriptは特別で、コールバックで呼び出されるメソッドに引数が渡されてる渡されてないに関わらず引数の指定は必須ではありません。

無論他の言語となると話は変わってきますから、違いが有ることを理解した上で引数を省略するのはアリですし、エラーにもなりません。

イベントによって引数の内容が変わってきますが、例文のclickでは引数eventに対してはMouseEventが渡されています。
例えばevent.buttonにはマウスのどのボタンが押されたのかの変数が格納されています。

0Like

Comments

  1. @sayaka225

    Questioner

    回答いただきありがとうございます！
    今回の例文では引数eventにMouseEventが渡されているということは、今回は実行される内容がconsole.logでeventを参照していないので引数eventは書いても書かなくてもよいということですね！

Your answer might help someone💌

LoginSign Up