プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

ランキング評価する

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

執筆者:


comment

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

CAPTCHA


関連記事

【Java入門】例外処理の基本的な操作まとめ

概要 例外処理の基本的な知識と操作について記載しています。 例外処理の構文 try~catch~finally ◆基本構文

・fina …

PHPerがJavaを学ぶ5つのメリット

PHPerである私が会社でJavaの研修担当となり、私自身も大学生以来のJavaを勉強しなおして感じたことを書いていきたいと思います。 対象読者 ・PHP初心者 ・なんとなくPHPで動くプログラムを書 …

【Java】LinkedHashSetの使い方(挿入順を保持するSet)

LinkedHashSetはHashSetのサブクラスであり、同じメソッドが実装されています。 メソッドの使い方であればHashSetと同じなので、HashSetの使い方を参照下さい。  ↓ 【Jav …

ITエージェントが保有している案件数を比較してみました

概要 ITエージェントが保有している案件はどのくらいあるのか? また、Java案件に参画するにはどのエージェント経由が有利か? というちょっとした興味を元に調べてみました。 調査実施日:2021年5月 …

【Java入門】インターフェースの使い方まとめ

概要 インターフェースとは、内部実装を知る必要なく、利用する機能の接点のみを提供する仕組みです。 接点をソフトウェア的にいうと、メソッドのシグネチャと戻り値の型に当たります。 つまり、どんなメソッドに …

記事を探す

SpringFramworkの良書

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

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