ボタンイベント

ボタンのクリック処理

  • ボタンがクリックされたときの処理を、DOMイベントリスナーで記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>ボタンクリックイベントの例</h1>
<button id="mybtn">クリックしてね</button>
<script>
function btnclick() {
  alert('クリックされました');
}
window.addEventListener('load',
function() {
  var btn = document.getElementById('mybtn');
  btn.addEventListener('click', btnclick, false);
},
  false);
</script>
</body>
</html>
無名関数
  • 関数名を省略した記法
<script>
  window.addEventListener('load',
  function() {
    alert("OK");
  }
  ,false);
</script>
無名関数でひとつにまとめる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>ボタンクリックイベントの例</h1>
<button id="mybtn">クリックしてね</button>
<script>
window.addEventListener('load',
  function() {
    var btn = document.getElementById('mybtn');
    btn.addEventListener("click",
    function () {
      alert('クリックされました');
    }
      , false);
  },
false);
</script>
</head>
</body>
</html>

複数のボタンを処理する

  • btnclick関数には、引数を指定することができます
  • 引数を通じて、イベントに関するさまざまな情報を取得できます
  • この値を「イベント引数」「イベントオブジェクト」と言います
  • 特によく使うのが、「target」プロパティです
  • イベントが発生したターゲット要素、つまりボタンのクリックイベントなら「クリックされた要素」を表示します

function btnclick(event) {
クリックされたときの処理
}


プロパティ 意味
currentTarget 現在イベントを受け取っている要素
target イベントを送出した要素
timeStamp 発生時刻
type 発生しているイベントの名前
メソッド 意味
preventDefault イベントをキャンセルする
stopPropergation イベントをこれ以上、伝達しない

関数と引数
  • btnclick関数では、eventという引数を取得し、そのevent.target、つkまりクリックされたボタン要素のinnweHTMLを取得することで、どのボタンがクリックされたかを判定して出力しています
function btnclick(event) {
  alert(event.target.innerHTML);
}

このように、イベント引数のtargetプロパティを参照することで、イベントが発生した要素(ボタンのclickイベントならボタンの要素)を取得できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>クリックされたときにボタン名を表示する例</h1>
<div id="buttongroup">
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<button id="btn3">ボタン3</button>
</div>
<script>
function btnclick(event) {
  alert(event.target.innerHTML);
}

window.addEventListener('load',
  function() {
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var btn3 = document.getElementById('btn3');

    btn1.addEventListener('click', btnclick, false);
    btn2.addEventListener('click', btnclick, false);
    btn3.addEventListener('click', btnclick, false);
  },
false);
</script>
</body>
</html>
複数のイベントを簡単に処理する
  • ボタンのid名が、「btn + 連番」になっていることを利用して繰り返し処理をする
window.addEventListener('load',
  function() {
    var i, btn;
    for (i = 1; i <= 3; i++) {
      btn = document.getElementById('btn' + i);
      btn.addEventListener('click', btnclick, false);
    }
  },
false);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>クリックされたときにボタン名を表示する例</h1>
<div id="buttongroup">
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<button id="btn3">ボタン3</button>
</div>
<script>
function btnclick(event) {
  alert(event.target.innerHTML);
}

window.addEventListener('load',
  function() {
    var i, btn;
    for (i = 1; i <= 3; i++) {
      btn = document.getElementById('btn' + i);
      btn.addEventListener('click', btnclick, false);
    }
  },
false);
</script>
</body>
</html>

プロパゲーションを利用して親要素でイベントを受ける

  • ひとつずつイベントリスナーを設定しなくても、その親要素で一括してイベント処理を受け取ることもできます
イベントのプロパゲーション
  1. DOMイベントリスナーの方法では、イベントが発生すると、そのイベントがDOMツリー上の子要素から親要素へと順に伝わっていきます
  2. この伝達を「プロパゲーション」と言います
  3. イベントはまず、ドキュメントのトップから「どの要素に対して発生したのか」が末端まで調べられます
  4. このフェーズが「キャプチャフェーズ」です
  5. そして末端までくると、その要素がターゲットとして決まります
  6. これは、イベント引数のtargetプロパティとなります、これを「ターゲットフェーズ」と呼びます
  7. 結びつけられているイベントを末端から処理していくのは「バブリングフェーズ」です
  8. イベントリスナーがイベントを受け取るタイミングは、addEventListenerの最後の引数で指定します
  9. trueのとき「キャプチャフェーズ」、falseのとき「バブリングフェーズ」です

DOMオブジェクト名 .addEventListener('イベント名', 実行したい関数, falseまたはtrue);

addEventListenerメソッドでは、最後の引数には「false」を設定するのが一般的です。
これは、「バブリングフェーズ」で処理するということです。
つまり、子要素から順に、イベントを受け取るという意味になります。


f:id:pbhfq:20180117171232p:plain

親の要素でイベントを処理する
<div id="buttongroup">
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<button id="btn3">ボタン3</button>
</div>
  • 親要素「id="buttongroup"」内で、ボタンで発生したclickイベントは、この要素の「バブリングフェーズ」で受け取れます
  • ですから、それぞれのボタンに対してイベント処理を設定しなくても、div要素でまとめて受け取ればよいことになります
window.addEventListener('load',
  function() {
    var btndiv = document.getElementById('buttongroup');
    btndiv.addEventListener('click', btnclick, false);
  },
false);

f:id:pbhfq:20180117234632p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>クリックされたときにボタン名を表示する例</h1>
<div id="buttongroup">
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<button id="btn3">ボタン3</button>
</div>
<script>
function btnclick(event) {
  alert(event.target.innerHTML);
}

window.addEventListener('load',
  function() {
    var btndiv = document.getElementById('buttongroup');
    btndiv.addEventListener('click', btnclick, false);
  },
false);
</script>
</body>
</html>

求職者支援訓練 フェリカテクニカルアカデミー