iT邦幫忙

0

[鼠年全馬鐵人挑戰] Week20 - 超新手學前端 - JavaScript:監聽

嗨 大家早安午安晚安
這周開始 JavaScript 的直播班了
發現自己吸收程度真的很慢很多都看不懂QQ
還好有提供直播錄影連結
可以把不懂的重複看到懂~

這周就來紀錄學到的監聽筆記吧:)

何謂監聽

監聽是指一個事件觸發時才會進行對應程式的執行,例如按下Click點擊、按下鍵盤、滑鼠移過去都是屬於監聽的範圍。
如果要用白話一點的形容就是,我已經準備好了就等你一句話!!!
就像男生跟女生求婚:我已經準備好要娶妳了,就等妳點頭了(羞>///<
已經準備好要執行了,就差觸發了。

監聽練習

監聽的語法是:
變數名稱.addEventListener('click', function);

<body>
  <input type="text" id="input">
  <button type="button" id="submit">增加資料</button>
  <ul id="list"></ul>

  <script>
    var input = document.querySelector('#input');
    var btn = document.querySelector('#submit');
    var list = document.querySelector('#list');
    btn.addEventListener('click', updateData)

    function updateData() {
      var text = input.value;
      input.value = '';
      input.focus(); //輸入後讓游標繼續在input輸入框
      // var string= '<li>' + text + '</li>'; 舊的寫法
      var liHtml = `<li>${text}</li>`;  //ES6的寫法
      list.innerHTML += liHtml; 
      // list.innerHTML = list.innerHTML + liHtml;
    }
  </script>
</body>>

由上面程式碼得知,這裡是寫了一個按鈕及輸入框,當使用者輸入任何字元在按下按鈕下面空白就會有字的產生:

https://ithelp.ithome.com.tw/upload/images/20200621/20120789AptNBUMykE.jpg

這段程式主要是新增列表,類似留言版的概念,一個輸入框及送出鈕,再寫一個無內容的列表 ul;輸入框輸入值送出時會新增在列表上。

監聽是很基本很常用的用法,例如怎麼抓id的值、怎麼運用執行按下一顆鈕處發函式、怎麼抓到輸入框的值及怎麼讓值塞到畫面上呈現,這是需要時間去理解及消化的,加油加油 go~!!!


1 則留言

0
iT邦新手 5 級 ‧ 2020-06-24 17:59:09

例如按下Clickc點擊
多打了個c

a841722 iT邦新手 5 級 ‧ 2020-06-28 17:06:25 檢舉

謝謝

我要留言

立即登入留言