プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【Spring】バリデーション時に、入力値を保持する方法

登録画面で「登録」ボタンを押した後、 バリデーションで引っ掛かってエラーになっても 入力内容を画面に保持して置く方法についてです。 テンプレートエンジンは、Tymeleafを使用しています。 方法とし …

【Laravel】SQLの確認はenableQueryLogを使う

SQLのデバッグのために、SQLとバインドされた値を確認したいことがあります。 その時に使える方法として、よく提示されるのは以下の2つです。 1.enableQueryLogメソッドとgetQuery …

MySQL-タイムゾーン設定すると起動しなくなる原因と対処方法

MySQLのタイムゾーン設定をすると、XAMPPでMySQLが起動できなる原因と対処法です。   目次 原因XAMPP起動時に表示されるエラーメッセージ対処方法timezonesをダウンロー …

no image

GitでIndexが壊れたときの直し方

これは自分の環境用の備忘録です。 (状況) Virtual BOX内のGit環境において、INDEXが0KBになっている。(INDEXが壊れている) (対処方法) リモート環境から新しくCloneして …

フロントエンジニアとバックエンドエンジニアのどちらになるべきか?

目次 対象読者フロントエンジニアかバックエンドエンジニアか?・役割から考える・やりたいことで考える・性格や得意なことで考える各々の今後のスキル目標どっちもやりたい場合どれくらい稼げるか?・フロントエン …

SpringFramworkの良書

Javaの基本を学んだ人が、次のステップ(Frameworkでの実装)として読む本。

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