methodsにおけるfunctionの引数が参照しているのは何か

Question

前提・実現したいこと

書籍『基礎から学ぶVue.js』のチュートリアルでToDoアプリを作っています。
その中のコードでタイトルの通りmethodsにおけるfunctionの引数が参照しているのは何かがよく分からなかったため質問しました。

何が分からないか

下記コードのdoAddメソッドでfunctionの引数がeventとvalueとなっています。ここで、第2引数のvalueは「フォームに入力された文字」であると思うのですが、第１引数のeventが何を表しているのか、なぜ必要なのかよく分かりません。valueで参照するためにとりあえずeventは必要なのでしょうか?

該当のソースコード(抜粋)

<div id="app">
  <h2>新しい作業の追加</h2>
  <form class="add-form" @submit.prevent="doAdd">
    コメント<input type="text" ref="comment">
    <button type="submit">追加</button>
  </form>
</div>

const app = new Vue({
  el: '#app',
  data: {
    todos: []
  },
  methods: {
    doAdd: function(event, value){
      var comment = this.$refs.comment
      if(!comment.value.length) {
        return
      }
      this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: 0
      })
      comment.value = ''
    }
  }
})

Answer 1

第１引数のeventが何を表しているのか

「クリックされた」「値が入力された」などをイベントと呼び、そのイベントに関する情報が入ったオブジェクトです。下記参照してみてください。
https://developer.mozilla.org/ja/docs/Web/API/Event

なぜ必要なのか

記載のソースコードでは未使用のため不要だと思います。
よくある使いどころとしては、イベント発生元の要素名を取得したり、イベントのタイプを取得して処理を分岐させたりなどがあります。

Comments

[yuto_210301]

丁寧なご回答ありがとうございます。
1つ目の回答について
- conole.log(event)としてみたところ、いろいろなオブジェクトが表示されました。これがイベントに関する情報が入ったオブジェクトなのですね。
２つ目の回答について
- 試しにeventとvalueを消してdoAdd: function() {...}としたところ、問題なく動作したので、仰る通りこれらの引数は不要であることが分かりました。