プログラミング JavaScript

画面にonclickを書かずにイベントを発生させる方法

投稿日:

画面にonclickを記述すると、JavaScript側で関数名が変更になった際の修正が面倒になる。
なのでonclickを記述せずにイベントを発生させるように記述することが望ましいと子ドレビューで指摘を受けたことのメモ。

【方法論】
addEventListenerでクリックイベントを設定する。

【手順】
1.画面のボタンにidを設定する。
2.JavaScript側でidに対してaddEventListenerでクリックイベントを設定する。
3.設定するタイミングはDOM構築後とする。

<修正前>


<修正後>

これでJavaScript側の修正だけで対応できるようになりました!
修正箇所を限りなく局所化させるコーディングスタイルはどんどん学んでいきたいです!

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング, JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

VBAが書けるまでにどのくらいかかったか?

これからVBAを学ぼうとしている人向けに参考情報として書きます。 前提 前提として、私の経歴を少し書いておきます。 ・PHPでのWeb開発1年未満 ・Javaの簡易なアプリは作れる ・SQLも理解して …

【Java入門】ラムダ式の基本構文と変数スコープ

概要 Javaにおけるラムダ式について解説します。 ラムダ式とは? OracleのJavaドキュメントに簡潔な説明があったので引用したいと思います。 Lambda expressions enable …

プログラミングを上達させるために私がやってきたこと・やっていること

私の上達過程 写経 自分のレベルに合う本をもとに写経しては、コードの意味を調べて理解し、少しづつ体に染み込ませるように身に着けていきました。 とにかく初心者のころは右も左も分からず、ちょっとしたエラー …

【Spring Data JPA】deleteAllとdeleteAllInBatchの違い

概要 Spring JPA Dataにおける、deleteAllとdeleteAllInBatchの挙動の違いについてです。 結論から言うと、実行されるSQLが違います。 SQLの違い 【前提】 3件 …

正規表現で複数の箇所を入れ替える方法

複数の特定の箇所を入れ替えるテクニックです。 確認環境 Sakuraエディタ 置換方法 ここでは例として、:区切りの前後の文字列を入れ替えてみます。 置換前データ メニュー:AAA メニュー:BBB …

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。