event (事件)

js上課筆記5/27

event

可以在元素上綁定事件，當滑鼠點擊、滑鼠移入移出、或按下鍵盤按鈕時，便觸發一些事件，產生一些效果出來，由此讓使用者體驗更好。

當事件被執行或觸發時，都會產生一組物件 object，裝在函式裡的第一個參數裡，紀錄各種詳細的資訊，例如座標位置等等。

舊式寫法（不建議 X）：可以在 HTML 上寫 JavaScript 的事件，此寫法容易被駭客入侵程式。

公式：object.onclick = function(e){ myScript };

onclick 點擊後觸發動作，後面一定是加 function，不能用呼叫 function 的方式會出錯。

元素綁定事件觸發一組動作， function 內的參數 e 用來紀錄事件的類型及詳細資訊，不是用來裝要代入的數值。

addEventListener 事件監聽

element.addEventListener(‘選擇事件’, 代入匿名function(e){script}, false(default)/true);

onclick 跟 addeventlistener 的差別

1. onclick 只能綁一個事件，不能同時綁定兩個以上的事件，如果綁定兩個事件，只會讀取最後一個事件，把之前的 onclick 給覆蓋掉，事件使用的靈活性較低。
2. addeventlistener 可以同時綁幾個事件，且不會覆蓋掉之前的事件，靈活性較高。

範例：

addEventListener 裡面的 ( false (default) / true )

1. false：事件氣泡（Event Bubbling）預設值，沒有寫的話，會直接給定 false，從指定元素往外找。較合乎邏輯，當點擊物件時，應該是根據點擊點較近的元素，來觸發事件。→ 點擊泡泡，泡泡破掉並向外噴發找尋。
2. true：事件捕捉（Event Capturing），從最外層找出指定元素。有些情況下，例如在寫系統的時候，希望知道最外層的狀況後，再慢慢的往內提供相關的資訊，就會用到 true。→ 在大草原裡，捕抓一隻小兔子。

stopPropagation 停止傳播

event.stopPropagation();

有時候會遇到元素跟元素重疊的情況，重疊的元素監聽都會被觸發，如果希望只觸發當前點擊的物件監聽，就不再做其他的監聽事件，這時候就要用到 stopPropagation 使它只抓到當前事件隨即停止。

preventDefault 取消默認

e.preventDefault();

取消元素的默認行為，常用於：

1. 取消 a 連結的默認行為。用於只是單純操控其他元素的動作而已，並不是真的連結，不會連到其他的頁面時。
2. 取消 submit 按紐的 傳送資料到指定後端 行為。而是會先透過我的 js 去查詢表單有沒有錯，再用 post 傳送資料。

target

var el = document.querySelector('html');
el.addEventListener('click',function(e){
  console.log(e.target.nodeName); // 節點名(標籤名)
})

透過 target 的方式，可以去確認到目前點擊的元素是什麼。