プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

ランキング評価する

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

執筆者:


comment

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

CAPTCHA


関連記事

【SpringSecurity】#3~ 独自のログイン画面

概要 オリジナルのログイン画面を実装する方法です。 以下の内容になっています。 ログイン用のHTMLを用意する。 Controllerにログインの遷移先を定義する。 SecurityConfigクラス …

メソッドを切り出すメリット。リーダブルなコードで行こう!

概要 大きなクラス、長いメソッドを書いたり読んだりしていて、ロジックが追えなくなってきています。 私の周りではすごく理解が良く、長い処理でも追っていける人がいますが私はそうではありません。 私はごくご …

【Java】ArrayListの最長文字列を取得する簡単な方法

(追記)2020/08/19 1. Listが空の場合(NoSuchElementException)に対応しました。 2. Nullが含まれていた場合、空文字として扱うように修正しました。 Arra …

【Java】TreeSetの使い方(順序付けSet)

TreeSetの使い方 基本的な使い方はHashSetと同じなので、以下を参照下さい。 【Java】HashSetの使い方いろいろ TreeSetは何も指定せずにインスタンスを生成すると、Collec …

no image

prepareステートメントの挙動について調べてみた

調べるきっかけ PHPでSQLをセキュアに記述する方法としてprepareステートメントが推奨されているが、なぜなのかがわからず、挙動を調べれば自分なりに納得のいく答えがでるのではないかと思ったため。 …

SpringFramworkの良書

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

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