プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

執筆者:


comment

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

CAPTCHA


関連記事

CSV/TSVデータを作成するVBAツールを公開

【追記:2020年8月1日】 UTF-8(BOM無し)に対応しました。 業務でテスト用のCSVファイルを作成することがよくあるので、自分でツールを作成しました。 TSVにも対応しています。 基本仕様 …

【Node.js】Excel⇔JSON変換する方法

やること 1.ExcelファイルをJSONで取得。 2.JSONの編集後、新しいExcelファイルに出力する。 環境 Node.js ・インストール  https://nodejs.org/ja/   …

【Java】画像ファイルをバイナリで比較する方法

  画像ファイルの比較 比較元ファイル 素材はPhotoACから拝借しました。 コピー元画像:PCを持つ女性 コピーしたファイルとの比較(True) コピー元ファイルをコピーしただけのファイ …

Thymeleafで1000円単位をカンマ区切りで表示する方法

Thymeleaf(テンプレートエンジン)で金額などの数値を 1000円単位のカンマ区切りで表示する方法です。 ここでは、カンマ区切りの機能はオブジェクト側で実装し、 Tymeleaf(View)は表 …

【SpringBootチュートリアル】#4~ headerの作成と埋め込み

概要 全ての画面で使用するヘッダーを作成します。 そして、Index画面に埋め込むところまでを行います。 共通ヘッダーの作成

・&lt …

記事を探す

SpringFramworkの良書

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

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