プログラミング JavaScript

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

投稿日:

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

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

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

<修正前>


<修正後>

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

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

執筆者:


comment

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

CAPTCHA


関連記事

no image

【PHP】配列と連想配列と多次元配列の説明と使用例

目次 配列とは?定義例まとめ 配列とは? 1つの変数に複数の値を持つものです。 整数型や文字列型は1つの変数に1つの値を持ちますが、配列は同じようなデータの集まりを1つの変数に持つことができるようにな …

no image

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

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

MySQL-タイムゾーン設定すると起動しなくなる原因と対処方法

MySQLのタイムゾーン設定をすると、XAMPPでMySQLが起動できなる原因と対処法です。   目次 原因XAMPP起動時に表示されるエラーメッセージ対処方法timezonesをダウンロー …

正規表現で複数の箇所を入れ替える方法

複数の特定の箇所を入れ替えるテクニックです。 目次 確認環境置換方法置換前データ正規表現置換結果解説 確認環境 Sakuraエディタ 置換方法 ここでは例として、:区切りの前後の文字列を入れ替えてみま …

Redmineでリンクにできない場合にチェックすること

目次 リンクにできない場合のチェック項目リンクにするには?リンクにできる例リンクにできない例 リンクにできない場合のチェック項目 前後に文字列がくっついている。 前後に全角スペースがある。 リンクの# …

SpringFramworkの良書

Javaの基本を学んだ人が、次のステップ(Frameworkでの実装)として読む本。

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