event(事件) - HackMD

--- type: slide --- # event(事件) ###### tags:`HyUI4.0` --- 網頁雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。 <br/> ```htmlembedded= 家裡的電話(JS) -> 電話響了 (事件被觸發) -> 接電話 (去做對應的事) ``` --- onclick() 與 addEventListener() 語法差異 --- ```javascript= // 綁定事件1 arrow.onclick = function (w) { alert('<事件1>'); }; //綁定事件2 arrow.onclick = function (w) { alert('<事件2>'); }; ``` 會印出什麼呢？ <事件2> --- onclick() 不能同時綁定一個以上的事件，只會執行後綁的事件。 --- addEventListener() 可同時綁定多個事件，事件一直行完後執行事件二。 ```javascript= // 綁定事件1 arrow.addEventListener('click', function () { alert('<事件1>'); }); //綁定事件2 arrow.addEventListener('click', function () { alert('<事件2>'); }); ``` --- 目前主要都會是使用 .addEventListener() 來偵聽事件 ```javascript= target.addEventListener(event, function(){}, useCapture); ``` <div style="text-align:left;padding-left:50px"> event：要監聽的事件，例如 click<br/> listener：事件觸發後要執行的函式<br/> useCapture：布林值，預設值是 false，「捕獲」或「冒泡」機制執行，若不指定則預設為「冒泡」<br/> </div> --- Event Bubbling、Event Capturing --- 事件冒泡 (Event Bubbling) 事件冒泡指的是「從啟動事件的元素節點開始，逐層往上傳遞」，直到整個網頁的根節點，也就是 document。 --- ```htmlembedded= <!DOCTYPE html> <html> <body> <div>click</div> </body> </html> ``` 假設我們點擊了 CLICK 元素，那麼在「事件冒泡」的機制下，觸發事件的順序會是： ```html [1|2|3|4] <div>CLICK</div> <body> <html> document ``` 像這樣 click 事件逐層向上依序被觸發，就是「事件冒泡」機制。 --- 事件捕獲 (Event Capturing) 「事件冒泡」機制是由下往上來傳遞，那麼「事件捕獲」(Event Capturing) 機制則正好相反。 --- 像這樣 click 事件由上往下依序被觸發，就是「事件捕獲」機制。 ```html [1|2|3|4] document <html> <body> <div>CLICK</div> ``` --- e.target 與 nodeName --- target 在網頁上是指目前所在元素的位置 ```htmlembedded= <ul> <li> <a href="#" class="link">連結</a> </li> </ul> ``` --- 在 JS 增加一個 addEventListener 語法，來找下 e 裡面的事件，就可以看到 target ```javascript= var link = document.querySelector(".box"); link.addEventListener('click',function (e) { console.log(e); } ); ``` 而使用e.target即可抓到該點擊物件 --- nodeName 在網頁上有節點名稱的意思，代表 DOM 元素點擊到的節點。可以搭配e.target去抓取結點後，去執行一些事件 (用nodeName抓取的節點名稱都會是大寫) --- 要注意的是JS沒有像JQ可以同時偵測事件，不同的事件需要多寫一次 ```javascript= $('button').on('load resize',function(){}) ``` ```javascript= button.addEventListener('load',function(){}) button.addEventListener('resize',function(){}) ``` --- 參考資料 [HTML DOM 事件](https://www.w3schools.com/jsref/dom_obj_event.asp) [初探JavaScript - JS 事件 Event - 關於addEventListene中true & false的差異](https://ithelp.ithome.com.tw/articles/10238258) <style> .reveal h1{ font-size:2em; } .reveal h1,.reveal h2 { color:#c9f2ff; } </style>