求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

ボタンイベント

ボタンのクリック処理

  • ボタンがクリックされたときの処理を、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>
無名関数でひとつにまとめる
<!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>

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