0%

event.target

event.target 相關內容整理

event 簡介

function 小括號裡面帶入隨意參數 a,若用按鈕觸發這個 function 則會取得
MouseEvent,如下圖

MouseEvent 點開後可看到各種資訊,像是 clineXclineY,如下圖

event.target

往下會看到 target 的屬性,裡面有 innerHTMLinnerText

可以將 function 裡面用 a.target.innerHTML = 'BTN' 來變更按鈕上的文字

若是在 button 裡面增加 value 屬性,使用 event.target.value 就可以取得其值

但剛取名的參數建議改用 e 或是 event 可以較明白這個參數是為了取得 event 事件內容

不用參數 e 與直接使用 event 差異

若不用參數也是可以直接使用 event ,如圖

但也會因為如此可讀性就較差,因為明明沒宣告任何值,就突然冒出一個可用的 event 值,閱讀直覺相對來說就比較差。

所以基於可讀性來說,建議還是要自訂傳入參數名稱

event.target 與 this 差異

而另外 event.target 也與 this 用法也有所差異

event.target 指的是當下滑鼠事件的目標
this 會指向綁定這個事件的元素