javascriptのテキストエリアを改行に合わせて自動拡大する処理についての説明が欲しいです。

Question

入力フォームを作っています。
通常のテキストエリアでは、改行しても画面が固定で見づらくなっていきます。
そこで、改行すると画面が一緒に広がっていくようにしたいと思いました。
いろいろ検索した結果以下のコードで実現可能なのですが、自身でコードを理解してから実装したいと考えています。

//textareaの要素を取得
let textarea = document.getElementById('text');
//textareaのデフォルトの要素の高さを取得
let clientHeight = textarea.clientHeight;

//textareaのinputイベント
textarea.addEventListener('input', ()=>{
    //textareaの要素の高さを設定（rows属性で行を指定するなら「px」ではなく「auto」で良いかも！）
    textarea.style.height = clientHeight + 'px';
    //textareaの入力内容の高さを取得
    let scrollHeight = textarea.scrollHeight;
    //textareaの高さに入力内容の高さを設定
    textarea.style.height = scrollHeight + 'px';
});

<textarea id="text"></textarea>

#text {
  width: 100%;
  height: 25px;
}

質問の前に確認

また文法についても確認したいところがあります。
jsの表記法は

const 変数名 = 場所.指示(引数);
のように、場所.指示
の組み合わせという理解で問題ないのでしょうか。

本題

特にわからないのは以下のコードです。

.addEventListener('input', ()=>{

これはaddEventListener()メソッドにより常に入力待ちを保持

('input'

により、テキストエリアに文字がインプットされると中カッコ内に入るという書き方なのかなと推測しました。
が、しかし、inputという引数を調べても思っているのと違うものが多くでてきたりしてどうしてもわかりません。
（素直に言うなら、一覧がみれるサイトなどがあればわかりやすいのにと思っています。）

 ()=>{

の部分についてもアロー関数というキーワードが出てきたものの、それって結局なんで書く必要があるの？といった具合です。

##作っているWEBサイトについて。
PHPで掲示板のようなものをつくっているのですが、一人一人に返信を書こうとした際にテキストエリアがずっと広がっているとスクロールの手間も増え非常に見づらいため、デザイン性を考えてデフォルトでは小さく、入力された文字によって大きくといった風にしたいのです。
PHPに関しては検索でだいたいは分かったのですが、jsに関しては全く調べてもわからなかったため質問させていただきます。

貼り付けさせていただいたコードはコメントも含めコピペそのままです。
初質問なので不備があればすみません。

Answer 1

addEventLisner の構文としては

target.addEventListener(type, callback [, options])

となっており、引数の意味としては、
・type … イベント名
・callbak … イベントが発行された際に実行する関数
を意味します。

以下の例１～３は、書き方が異なりますが、いずれも同じ意味になります。

例１）アロー関数を指定した場合

textarea.addEventListener('input', ()=>{
    // 処理
});

例２）無名関数を指定した場合

textarea.addEventListener('input', function() {
    // 処理
});

例３）関数名を指定した場合

textarea.addEventListener('input', updateValue);

function updateValue() {
   // 処理
}

アロー関数というキーワード

アロー関数は「例２」の「無名関数」を省略した書き方になります。
毎回 function を書くのが長いと思った人が考えた構文のようです。（本当にそういう理由なのかは知らないです。）

＜参考＞
■ JavaScriptで学ぶラムダ式入門【初心者向けにわかりやすく解説】
https://midolog.net/javascript-lambda-expression-tutorial/
■ HTMLElement: input イベント
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event

Answer 2

素直に言うなら、一覧がみれるサイトなどがあればわかりやすい

イベントリファレンス | MDN

---

場所.指示の組み合わせという理解で問題ないのでしょうか

ブラケット記法とかリテラルなどの細かい話をはしょれば、大体そんな感じです。
「場所」は「オブジェクト」、「指示」は「プロパティ」または「メソッド」と呼ぶのが一般的です。
JavaScriptの場合、「プロパティ」または「メソッド」自体も、「オブジェクト」（やオブジェクトにキャストされるプリミティブ）であることが多いです。

プロパティアクセサー - JavaScript | MDN