画面にonclickを記述すると、JavaScript側で関数名が変更になった際の修正が面倒になる。
なのでonclickを記述せずにイベントを発生させるように記述することが望ましいと子ドレビューで指摘を受けたことのメモ。
【方法論】
addEventListenerでクリックイベントを設定する。
【手順】
1．画面のボタンにidを設定する。
2．JavaScript側でidに対してaddEventListenerでクリックイベントを設定する。
3．設定するタイミングはDOM構築後とする。
＜修正前＞
|
1 2 3 4 |
<!-- 画面側 --> <button id="addTaskButton" onclick="addTaskButtonClick();">追加</button> |
＜修正後＞
|
1 2 3 4 |
<!-- 画面側 --> <button id="addTaskButton">追加</button> |
|
1 2 3 4 5 6 7 8 |
// JavaScript側 // DOM 構築後にイベント登録 window.onload = function(){ // イベント登録（追加ボタン） document.getElementById('addTaskButton').addEventListener('click', addTaskButtonClick, false); } |
これでJavaScript側の修正だけで対応できるようになりました！
修正箇所を限りなく局所化させるコーディングスタイルはどんどん学んでいきたいです！
最後までお読み頂き、ありがとうございました！
ご意見・ご要望がありましたら、遠慮なくコメント下さい！
もし内容が良かったらランキング評価を頂けると励みになります（＾＾）
⇒ランキング評価する
