ボタンをクリックするごとに数字がカウントアップします。addEventListener()を使って設定したイベントリスナーによってカウントアップしています。 以下ソースです。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>sample</title> <script> var g_cnt = 0; function clickedFunc(){ var elm = document.getElementById('dv'); g_cnt++; elm.innerHTML = "count=" + g_cnt; } function load() { var elm = document.getElementById('button'); elm.addEventListener('click', clickedFunc, false); } document.addEventListener("DOMContentLoaded", load, false); </script> </head> <body> <input type="button" id="button" value="簡単なイベントリスナー"> <div id="dv"></div> </body> </html> 処理の流れは次のようになります。 addEventListener(type, listener, useCapture)の引数。
①document.addEventListener("DOMContentLoaded", load, false); でDOMのイベントリスナーを読み込む関数loadを定義します。 次に、 ②elm.addEventListener('click', clickedFunc, false); でボタンをクリックしたときに呼び出される関数clickedFuncを定義します。 次に、 ③function load() { ボタンがクリックされたときの処理の内容です。 これでボタンが押された時の処理ができました。 わざわざ、こんな面倒なことをやっています。 <input type="checkbox" id='id1' value="3000" onclick="myfunc()">TWELITE Red 3,000円<br> や、 document.getElementById('btn').onclick = function(){ と どこが違うのでしょうか? useCaptureがカギになります。 次回の記事で解説します。 |