iT邦幫忙

DAY 26
0

JavaScript學習路系列 第 26

JavaScript學習路-(26)events-1

事件 (events) 在之前的文章出現蠻多次了,出現頻率跟函式有得拼吧!
事件可偵測用戶做了什麼事情,接收訊息後採取相關動作。
例如 onload (頁面讀取完畢執行...)、onclick (按下按鈕執行...),
這些都屬於使用者做了某些事情, JavaScript 利用這些事件接收、觸發動作。

觸發事件之後要幹嘛?當然是執行某個函式,像是 onclick 後執行檢驗資料比對的函式...等等。
所以這些函式又可以叫做事件處理函式 (event handler);而這些函式因為都在後台 standby,
等待事件告訴他們該上場表演一下,所以又稱事件監聽函式 (event listener)。

事件大致分為三類:
用戶介面(滑鼠、鍵盤等)
邏輯(處理結果)
變化(對文件修改行動)
W3 School 有全部 JavaScript DOM 事件表

事件處理器 (onevent) 是物件裡的其中一個屬性,跟事件處理器有關的事件皆以 on 開頭,例如 onload, onclick...等等,這些事件如果直接寫在 HTML 內...

<input type="button" "onclick=();">

就叫做行內模型 (inline model) 或行內註冊模型 (inline registration model) ;
把函式指定給事件處理器做物件屬性的就叫做傳統模型 (traditional model)
或傳統註冊模型 (traditional registration model) 。
看起來~好像很像,要說兩者的差異的話大概就是傳統模型是寫在 script tag 裡面吧!
但如果行內跟傳統都用到同一種效果,則是先讀到的先跑,且只跑一次。
例一:script 放在 body
因為 script 在 body, HTML 到 body 的時候還沒找到程式碼,所以行內不變動。
例二:script 放在 head
而 script 在 head 時,以第一個出現的為準。

本文同步發表於 http://azzurro.blog.aznc.cc/learn\_javascript\_26/


上一篇
JavaScript學習路-(25)表單驗證-3
下一篇
JavaScript學習路-(27)events-2
系列文
JavaScript學習路30

尚未有邦友留言

立即登入留言