プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

ランキング評価する

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

執筆者:


comment

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

CAPTCHA


関連記事

pageEncodingとcontentTypeのcharsetの違い

pageEncodingとcontentTypeのcharsetは処理されるタイミングが異なります。 それによって文字化けの原因につながっているので、どのように設定すればいいかを解説していきます。 違 …

PC, タイピング, パソコン

コミュニティ内のハッカソンに参加した体験談

クローズドなコミュニティ内で行われたハッカソンに参加してきました。 ハッカソンは短期間(短時間)で要件定義から実装までを行うイベントです。 ハッカソンに参加することになったきっかけは「要件定義から実装 …

レベルアップ, スキルアップ

Java中級者にレベルアップするには?

本記事は 「Javaでプログラムを書けるようになってきたけど、次はどうすればレベルアップできるのか?」 と次の目標を探している方向けです。 以下のレベル感の方を対象にしています。 ・Javaの基本構文 …

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

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

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

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

SpringFramworkの良書

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

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