JavaScript~~したら〜(HTML出力)するの書き方
ユーザーがなにかアクションを起こした時にそのアクションを引き金にして動作するもの
例えばボタンやスクロールやマウスを乗せるなど動作に紐付けて処理をします
今回は、
addEventListener(’アクショントリガー’ , 関数式)
イベントリスナーで送信ボタンが押されたタイミングで関数を実行する。
イベントリスナーは「監視するもの」という意味で
なにかのアクショントリガーに紐付けて関数を実行することができます。
また、その際にfunctionにコールバック関数としてevent引数を追加できるためeventを追加し、
preventDefault()関数でエンターキーのリロードをしないように処理を追加したりなど起きてほしくないイベントを抑制することも出来ます。
addEventListener("submit", function(event) {
event.preventDefault();
add();
});
イベントリスナー 使いそうなイベント一覧表
イベント種類 | 内容 | ドキュメント |
---|---|---|
click | マウスがクリックされた場合 | 参考 |
keydown | キーボードが押された場合 | 参考 |
keyup | キーボードが離された場合 | 参考 |
mousedown | マウスボタンが押された場合 | 参考 |
mouseup | マウスボタンが離された場合 | 参考 |
mousemove | マウスカーソルが移動した場合 | 参考 |
mouseover | マウスカーソルがオブジェクトに重なった場合 | 参考 |
mouseout | マウスカーソルがオブジェクトから離れた場合 | 参考 |
onLoad | ページが読み込まれた場合 | 参考 |
onUnload | 他のページに移動する場合 | 参考 |
focus | 選択された状態になった場合 | 参考 |
blur | フォーカスを失った場合 | 参考 |
submit | フォームがサブミットされた場合 | 参考 |
reset | フォームがリセットされた場合 | 参考 |
change | フォームの内容が変更された場合 | 参考 |
resize | ウインドウがリサイズされた場合 | 参考 |
abort | イメージの読み込みが中断された場合 | 参考 |
error | 読み込みが失敗した場合 | 参考 |
load | Webページの読み込みが完了した時に発動(画像などのリソースすべて含む) |
などなど、今回はさらにクリックイベントに紐付けてHTMLに書き出すところまでやりたいと思います
HTMLを生成するメソッド
タグを生成する事ができるcreateElement(“li”)
const li = document.createElement("li");
createElementはHTMLのタグを生成することが可能です。
タグを作っただけなのでこのままでは何も起きてくれません
出力する前に作成したタグに「クラス名」や「ID」,「中のテキスト」などを設定していくこともできるので簡単に紹介します
li.id = 'list'; //生成したタグにID:listを追加する
li.className = 'list';//生成したタグにクラス:listを追加する
などなどもちろん生成するタグがinputタグやstyleタグでも後で属性など様々追加できるためその際はまた調べて追記します
innerTextでタグの中にテキストを入れる
li.innerText = todoText;
innerTextはドットで続けると取得。
イコールで中の文字列を書き換えるということが出来ます。
つまりから文字列を入れて中のテキストを空にも出来ます
ちなみに、似たようなメソッドとして
textContent , innerHTMLというメソッドがあるのですが
調べる記事により相違点がまちまちで、比較的新しい2020年の記事を拝見したところ
ほとんど同じ動きをするらしく、
innerTextは\nの改行を認識したりinnerHTMLはエスケープされたタグをHTMLタグに変換したりなど微妙な違いがあるようですがほとんど同じなので
あまり意識して使用する必要はなさそうです
タグをHTMLとして出力 appendChild()
appendChild(挿入するタグ);
さてここまで来たらもう出力するのみです
上で表記の通り.要素.appendChild(タグ)で指定した要素の最後の子要素として出力することが出来ます
似たような使用法があるメソッドも紹介します
insertBefore(挿入するタグ , 追加する場所)
.親要素.insertBefore()は引数2つで好きな箇所にタグを追加することが可能です。「追加する場所」に指定したタグがある直前に「挿入するタグ」が追加されます。
注意点はこちらもアペンドチャイルドと同じで子要素として挿入する使用で相違点は場所を指定できることです
また引数の追加する場所にNULLを指定するとアペンドチャイルドと同じ動きになり末尾に追加するようにします
これで一通りクリックされたらHMTLに記述するギミックができました
イベントリスナーは非常によく使用するオブジェクトなので理解を深めていきたいですね
コメントをお待ちしております