學習日誌18-event(事件)4

11th鐵人賽

古德瑞

2019-10-03 23:24:42

610 瀏覽

分享至

keyCode - 點擊鍵盤事件

使用e.keyCode查詢按下哪個按鈕，再用keydown事件來觸發。
ex. 做三個圓球，分別按下按鈕1、2、3觸發往上移動:

建構 html與css，建立ul列表及三個li，分別命名ball1、2、3

<body>
    <ul>
        <li class="ball ball-1"></li>
        <li class="ball ball-2"></li>
        <li class="ball ball-3"></li>
    </ul>
    <style>
        .ball{
            width: 50px;
            height: 50px;
            border-radius:50% 50%;
            position: absolute;
            bottom: 0;
            transition: all 1s cubic-bezier(1, 0.08, 0, 1.19);
            display: block;
            background: #000;
        }
        .ball-1{left: 30px; } 
        .ball-2{left: 230px; } 
        .ball-3{left: 430px; }
    </style>
</body>

JS部分，先宣告body來指定html裡的body

var body = document.body;

命名goBall的 function，因為鍵盤很多所以switch會比if更適合
I. 寫入switch(e.keyCode)，參數keyCode用來辨識案件編號
II. 按鍵1、2、3 的 keyCode 編號分別是49、50、51
III. case帶入49、50、51，用querySelector選擇ball1、2、3
IV. .style.bottom = '2000px' ，讓事件觸發後，改寫CSS往上離開2000px
V. break結束每一分段

function goBall(e){
    switch(e.keyCode){
        case 49:
            document.querySelector('.ball-1').style.bottom = '2000px'
            break;
        case 50:
            document.querySelector('.ball-2').style.bottom = '2000px'
            break;
        case 51: 
            document.querySelector('.ball-3').style.bottom = '2000px'
            break;
    }
}

監聽按鈕按下並觸發 goBall，完成練習

body.addEventListener('keydown',goBall,false)

blur - 離開焦點進行事件觸發

使用blur來對失焦不在選定的情況下，進行事件觸發，常用來表單沒填到來進行提醒之類。
ex. 戶外活動交通工具的人數統計，再輸入格沒輸入或直接無值按下按鈕來觸發事件

建構 html，分別對汽車跟機車寫入各自代表ID，汽車carNumId、機車motoNumId

<body>
     <div>
         <h1>戶外活動交通工具的人數統計</h1>
         <p>一台汽車可載4人，機車可載2人</p>
         <p>目前交通工具，汽車 <input type="text" id="carNumId" >台 ，機車 <input type="text" id="motoNumId"> 台</p>
         <p><input type="button" Id="countId" value="計算中">，計算可載總人數是 <em id="totalId" class="tag"></em> 位。</p>
     </div>
</body>

JS部分，命名count的 function，
I. 宣告汽機車可載人數
II. 使用parseIn來解析字串變成數字，getElementById抓取input的ID，及其輸入的值
III. 用輸入的輛數乘上各自可載人數
IV. 相加各自交通工具的人數量

function count(){
  var carPeople = 4;
  var motoPeople = 2;
  var carNum = parseInt(document.getElementById('carNumId').value)*carPeople;
  var motoNum = parseInt(document.getElementById('motoNumId').value)*motoPeople;
  document.getElementById('totalId').textContent = carNum + motoNum
}

命名checkContent的 function
I. 宣告str指定e.target.value
II. 加入if判斷式，判斷如果input輸入是空的，就會 alert'此欄位不可為空'

 function checkContent(e){
      var str =  e.target.value;
      if(str==''){
          alert('此欄位不可為空')
      }
  }

宣告變數el指定 button 的ID，並監聽點擊事件

 var el = document.getElementById('countId');
 el.addEventListener('click',count,false);

分別針對兩個input輸入文字空格做失焦，或未選對input做觸發事件

 var car = document.getElementById('carNumId');
 car.addEventListener('blur',checkContent,false);
 var moto = document.getElementById('motoNumId');
 moto.addEventListener('blur',checkContent,false);

完成練習，附表

<body>
     <div>
         <h1>戶外活動交通工具的人數統計</h1>
         <p>一台汽車可載4人，機車可載2人</p>
         <p>目前交通工具，汽車 <input type="text" id="carNumId" >台 ，機車 <input type="text" id="motoNumId"> 台</p>
         <p><input type="button" Id="countId" value="計算中">，計算可載總人數是 <em id="totalId" class="tag"></em> 位</p>
     </div>
    <script>
      function count(){
          var carPeople = 4;
          var motoPeople = 2;
          var carNum = parseInt(document.getElementById('carNumId').value)*carPeople;
          var motoNum = parseInt(document.getElementById('motoNumId').value)*motoPeople;
          document.getElementById('totalId').textContent = carNum + motoNum
      }
      function checkContent(e){
          var str =  e.target.value;
          if(str==''){
              alert('此欄位不可為空')
          }
      }
      var el = document.getElementById('countId');
      el.addEventListener('click',count,false);

      var car = document.getElementById('carNumId');
      car.addEventListener('blur',checkContent,false);
      var moto = document.getElementById('motoNumId');
      moto.addEventListener('blur',checkContent,false);
    </script>
</body>