iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
Modern Web

JavaScript初心者ノ研究日記。系列 第 13

十三日目 JavaScript 監聽 イベントリスナーノ章

(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 !
 
音檔
 

 日本語   平仮名   中.英   羅馬拼音 
 イベントリスナー       監聽 EventListener   I BenTo RiSuNa 
 イベント       事件 Event   I BenTo 
 ターゲット       目標對象 target   Ta~Ge tto 
 メソッド       方法 method   MeSo ddo 
 インターフェース        介面 interface   InTa~Fe~Su 
 登録する    とうろくする   註冊   Tou RoKu 
 マウスホバー        游標hover   MauSu HoBa~ 
 システム       系統 system   ShiSuTeMu 

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


上一篇
十二日目:JavaScript DOMノ章
下一篇
十四日目:JavaScript 做一個BMI 計算機 &偷偷講樣板字面値。
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言