ユーザーがなにかアクションを起こした時にそのアクションを引き金にして動作するもの

例えばボタンやスクロールやマウスを乗せるなど動作に紐付けて処理をします

今回は、

addEventListener（’アクショントリガー’ , 関数式）

イベントリスナーで送信ボタンが押されたタイミングで関数を実行する。

イベントリスナーは「監視するもの」という意味で

なにかのアクショントリガーに紐付けて関数を実行することができます。

また、その際にfunctionにコールバック関数としてevent引数を追加できるためeventを追加し、

preventDefault()関数でエンターキーのリロードをしないように処理を追加したりなど起きてほしくないイベントを抑制することも出来ます。

addEventListener("submit", function(event) {
  event.preventDefault();
  add();
});

イベントリスナー　使いそうなイベント一覧表

などなど、今回はさらにクリックイベントに紐付けてHTMLに書き出すところまでやりたいと思います

HTMLを生成するメソッド

タグを生成する事ができるcreateElement(“li”)

const li = document.createElement("li");

createElementはＨＴＭＬのタグを生成することが可能です。

タグを作っただけなのでこのままでは何も起きてくれません

出力する前に作成したタグに「クラス名」や「ID」,「中のテキスト」などを設定していくこともできるので簡単に紹介します

li.id = 'list'; //生成したタグにID：listを追加する

li.className = 'list';//生成したタグにクラス：listを追加する

などなどもちろん生成するタグがinputタグやstyleタグでも後で属性など様々追加できるためその際はまた調べて追記します

innerTextでタグの中にテキストを入れる

li.innerText = todoText;

innerTextはドットで続けると取得。

イコールで中の文字列を書き換えるということが出来ます。

つまりから文字列を入れて中のテキストを空にも出来ます

ちなみに、似たようなメソッドとして

textContent , innerHTMLというメソッドがあるのですが

調べる記事により相違点がまちまちで、比較的新しい2020年の記事を拝見したところ

ほとんど同じ動きをするらしく、

innerTextは\nの改行を認識したりinnerHTMLはエスケープされたタグをＨＴＭLタグに変換したりなど微妙な違いがあるようですがほとんど同じなので

あまり意識して使用する必要はなさそうです

タグをHTMLとして出力　appendChild()

appendChild(挿入するタグ)；

さてここまで来たらもう出力するのみです

上で表記の通り.要素.appendChild(タグ)で指定した要素の最後の子要素として出力することが出来ます

似たような使用法があるメソッドも紹介します

insertBefore(挿入するタグ , 追加する場所)

.親要素.insertBefore()は引数2つで好きな箇所にタグを追加することが可能です。「追加する場所」に指定したタグがある直前に「挿入するタグ」が追加されます。

注意点はこちらもアペンドチャイルドと同じで子要素として挿入する使用で相違点は場所を指定できることです

また引数の追加する場所にNULLを指定するとアペンドチャイルドと同じ動きになり末尾に追加するようにします

これで一通りクリックされたらHMTLに記述するギミックができました

イベントリスナーは非常によく使用するオブジェクトなので理解を深めていきたいですね