簡単なイベントリスナーの例

ボタンをクリックするごとに数字がカウントアップします。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)の引数。
type 対象とするイベントの種類の文字列
listner イベントが発生したときに呼び出される関数
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がカギになります。
次回の記事で解説します。