プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

ランキング評価する

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

執筆者:


comment

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

CAPTCHA


関連記事

【Java】オブジェクト指向の練習題材(会員オブジェクト)

前回記事、オブジェクト指向とは何なのかを簡単に説明してみるの練習題材です。   仕様 以下の会員クラスを作成し、Mainクラスで表示する。 会員クラスには、「会員」という単位で持つことできる …

映画のレイティング判定をStateパターンで実装する

ユーザが見ることができる作品を、映画のレイティングシステムに従って選別できるように実装します。 映画のレイティングシステムとは、年齢制限する規制のことです。 G:全年齢 PG12:12歳以上 R15+ …

【Bootstrap】ログイン画面をデザインしよう!

概要 【SpringSecurity】#3~ 独自のログイン画面でシンプルな独自のログイン画面を実装しました。 これに、Bootstrapでデザインを施していきます。 Bootstrapのサンプルを基 …

【Java】Doubleとdoubleの違いは何か?

結論 Double:オブジェクト型 double:プリミティブ型 「Doubleはdoubleをラップしたオブジェクトである」ということです。 (・ω・´。)ん?つまりどういうこと? こゆこと。  ↓ …

【SpringSecurity】#2~ ユーザ毎の権限設定(認可)

概要 権限によって、アクセス可能なページを制限する機能の実装します。 管理者画面を作成し、権限によって画面の出し分けを行います。 前提 #1~ ログイン画面の実装が完了していること。 管理者画面の追加 …

記事を探す

SpringFramworkの良書

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

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