(U 'ᴗ' U)✧ 日安。我是SONYKO
今天要來講監聽。

真心覺得中文很厲害、日文的監聽叫 EventListener（イベントリスナー）
中文兩個字就可以搞定了　ネ申

PA大哥、這顆監聽大聲一點謝謝 。

✦　什麼是事件監聽

要說完整一點，應該說它是「 事件監聽 」
我們把 事件 和 監聽 拆開來介紹。

⑅　事件　Event

當你「 點擊 」或是「 滑鼠滑到某個區域 」或是「 改變視窗大小 」etc...
這些動作行為就稱作 事件 。

當然不只有我們手動觸發的才叫事件、
像是「 網頁載入完畢 」或「 連線成功 」這種系統方面的行為 也叫事件。

《 如果想知道更多事件對象，可以參考這個網站 》

⑅　監聽　Listener

監聽簡單來說就是，當你觸發事件時，就會去做某某動作。
不、不要黑人問號！我這邊舉例給你聽！

情境：
　我今天做了一個按鈕，然後我寫了一段函式。
　那段函式會跳出一個警示窗，內容寫~~「 恭喜您是第9999位幸運兒！」~~

　我想要當使用者按下按鈕時、這個視窗就會跳出來，
　所以我必須給那顆按鈕一個事件監聽。
　因為我總不能一直 console.log 吧，使用者看不到 console.log 。

相信各位可以理解監聽是做什麼用的了吧！
我們終於可以寫些 與使用者有互動的功能了。

✦　事件監聽語法

雖然很長、但有文字編輯器就不用怕哩。
但還是建議大家背一下，如果是要求職滴朋友的話。

✰ HTML：

<!-- 設置一個按鈕 -->
<input type='button' id='btn' value='按我'>

✰ JS：

// 1. 取得 DOM
var btn = document.querySelector('#btn')

// 2. 你ㄉ按鈕.事件監聽 ('事件觸發方式',要執行的函式)
btn.addEventListener('click',function(){
	alert('恭喜您是第9999位幸運兒！')
});

codepen

✰ JS 寫法2：函式 與 事件監聽 分開寫

/* 用一樣的 HTML */
var btn = document.querySelector('#btn')

// 寫函式
function lucky(){
	alert('恭喜您是第9999位幸運兒！')
}

// 寫監聽
btn.addEventListener('click',lucky)

上面兩種寫法結果是一樣滴。
如果今天函式很長一段，那就建議用第二種寫法，比較整齊。

其實，監聽就這樣而已 (U 'ᴗ' U) ♪
講完了餒 ww
　

✦　只好雜談了

我一開始學JavaScript ，我真的不知道監聽在幹嘛。
「奇怪，我就監聽了啊？為什麼不會動？」各種錯亂((

Code 有問題就瘋狂找人問（ 臉皮瞬間變很厚 ）
很幸運的是，我遇到的工程師們每個都很熱心。
所以自己也想成為像他們一樣的工程師，幫助新手、讓他們可以堅持下去。

身旁的工程師朋友每個都說：「 邏輯有一天就會突然通了 」，
我一直覺得他們在開玩笑。直到我前陣子放置JS 去練切版，再回來寫JS、
真的！很不可思議！那些以前糾結在一起的邏輯突然都通了 (U °ᴗ° U)！

所以想鼓勵邏輯正在打結的朋友，我金魚腦都慢慢能理解了
你們一定ok 的。 加油！

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

　
最近好像有點偷懶w
因為我發現，前端相關的用語大多都直接唸英文。
像是 今天的監聽，日文也是直接取日文的 EventListener ！
　
音檔
　

✦ イベントリスナーを登録する　註冊監聽