プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

ランキング評価する

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

執筆者:


comment

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

CAPTCHA


関連記事

【SpringBoot入門】#1~ 開発環境を準備しよう(IDE)

想定読者 SpringBootを始めて学ぶ方   IDE(Eclipse) IDEにはEclipse以外にもNetBeansやIntelliJがあります。 好みによりますので使いやすいものを …

pageEncodingとcontentTypeのcharsetの違い

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

【Javaポートフォリオ】なぜスクレイピングツールがおすすめか?

なぜスクレイピングツールか? ・スキルに需要がある ・総合的なスキルが身に付く ・個人開発に応用できる スキルに需要がある 執筆時点(2021年3月28日)時点で、ランサーズに1643件の発注がありま …

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

前回記事、オブジェクト指向とは何なのかを簡単に説明してみるの練習題材です。 ここでは3つのオブジェクトを作成していきます。 – 会計オブジェクト:会計金額の算出 – 請求書オブ …

no image

JavaScriptの修正が反映されない問題の具体的な対処法

JavaScriptを編集したあと、画面をリロードしても反映されない場合の対処方です。 方法としてはPHPを使いますので、利用可能な環境でない方は申し訳ありません。 以下のサイトで、Cache Bus …

記事を探す

SpringFramworkの良書

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

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