昨天把 TodoList 上 javascript
的部分幾乎看完了!
但 click 的部分沒有做完研究呢
先附上 Todo List - codepen
如果直接看 code 和看最後的頁面結果的話,就知道當 點擊
待辦事項的時候,待辦事項就會被改變,改變的事情也就是被寫在 function
裡。
我們都會統稱 點擊
為事件 (event) 或 點擊事件(click event)
,那當然還有很多與使用者互動的事件,不過原理都一樣,所以想帶大家認識(複習)一下,瀏覽器怎麼處理 事件
的
javascript
是一個事件驅動(event-driven) 的語言
大家應該都很熟悉,在網路頁面上都是要做了某一項操作才會有事情產生,產生了事件 javascript
才會去處理(像是我們的 TodoList 一樣)。javascript engine
的實作是單核(單線程)的,這也是它最大的特性之一。
雖然說是單線程但像是事件(event),網路請求(xhr)或是讀檔(filereader),這些 API 都是非同步發生的,因為這些 API 有時候會比較慢如果讓他 block 住 UI ,使用者體驗會很糟
這些異步的 API 要怎麼被執行呢?
mdn-EventLoop
Reference
昨天有發現事件居然有三種註冊的寫法,查到了 事件處理才知道這些叫做事件處理模型,而 html-event
與 onclick
不建議在使用
以 todo list 為例,就是按鈕上加上 onclick
<button onclick="addTodo()" class="addBtn">新增</button>
不建議這樣寫,因為你不知道 window 有沒有定義 addTodo
這個 function,
gitbook 說彈性不好不建議使用
像是這樣
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
不建議使用這個,擴充性不好,像是觸發設定,自定義事件都不能做到
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
顧名思義加入事件監聽,當觸發事件就會執行 callback
事件監聽還多了三種方法使用
請看圖
當事件產生的時候會有三個 phase
註冊事件的 params 如下
addEventListener( type, handler, phase:boolean )
phase === true 註冊事件捕捉
phase === false 註冊事件冒泡
當 handler 被執行時會帶一個 event 的實例
比較常用到的 property & method 如下
捕捉
或 冒泡
phase 中被呼叫的 handler 的節點target phase
的那個節點<input />
的行為是在頁面上輸入時會有字,如果呼叫了 event.preventDefault 就無法輸入HTML
<ul id="todo-list">
<li>第一個工作</li>
<li class="checked">先完成這個</li>
</ul>
Javascript
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
ul
節點被註冊了 click
冒泡
事件
當 li
被點擊時,事件流程會開使從上捕捉然後到達 li
target
到目前為止都還沒有 handler 被執行
直到 冒泡
至 ul
這個節點 handler 才被執行
因為 target
會指到 li
所以就可以對他做 style 的改變
而利用了 冒泡
的特性,就不用對每個 list item 節點進行註冊或者 assign onclick function ,只要註冊在比較上層的地方就可以了,因此代碼變簡潔了呢!