JS趴趴往上走-Event Object

-

Event Object

還記得當我們要監聽事件時，會使用addEventListener()也就是我們的事件處理器(Event Handler)，這時候事件被觸發，瀏覽器就會為創造一個物件，就是我們稱為的的事件物件(Event Object)，裏面包含了所有與這個事件有關的屬性，並已參數形式傳給事件處理器，像是e.preventDefault()或者e.stopPropagation()也屬於事件物件

當使用者點擊時觸發事件(e為參數，可以自行定義名稱)

 //html
 <button class="btn">點擊按鈕</button>

 //JS
 btn=document.querySelector('.btn');
 btn.addEventListener('click',function(e){
  console.log(e);
},false);

點擊button後產生的結果，會發現e所代表的就是我們觸發的事件物件(Event Object)




接下來來介紹一些事件物件:

target:了解目前所在元素位置

target再打開可以發現它也有事件物件可以使用，例如此範例的e.target.Nodename:了解目前的節點名稱(請點進去看console.log喔)
See the Pen
e.target by yanennn (@yennnnn)
on CodePen.


了解 screen、page、client箇中差異

  • screen:使用者整個顯示器的位置
  • page:當前網頁的相對位置
  • client:當前網頁中區域的位置
首先給個範例:
See the Pen
screen、page、client箇中差異 by yanennn (@yennnnn)
on CodePen.


使用滑鼠移動看看，sceen的數字都比其他兩個大一些，也就是說它也把不屬於網頁的地方也計算了進去，而page和client從左上角開始X,Y就為0表示它們只計算網頁位置;接下來試著滾動卷軸，就能看出page的Y數字變大了，也就是說它會計算此網頁的大小，而page只會計算你當前網頁的大小位置，假如網頁縮小成X,Y為250px，你得到的X和Y最大也只有250px;




不過要注意的是，每個事件物件所提供的屬性都會根據觸發的事件而稍微不同，像接下來介紹的

keycode:按下鍵盤得到屬於的 Unicode值

這種就是鍵盤事件(keyboardEvent)e.g.keydown、keypress、keyup才有的屬性(請點進去看console.log喔)
See the Pen
e.keyCode by yanennn (@yennnnn)
on CodePen.

還有許多的Event Object可以到w3c了解更多

參考資料:
https://www.w3schools.com/jsref/obj_event.asp
https://ithelp.ithome.com.tw/articles/10192015


留言

張貼留言