iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

溫故知新 JavaScript系列 第 22

Day22- 事件 event

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20201005/20129439DrJsuLZPpv.jpg
我們在操作網頁會使用滑鼠去點擊、滾動網頁或搭配鍵盤去操作網頁,當使用者去做這些動作時網頁可以去回應使用者一些事情,比方說點擊畫面中的某一處,就會顯示這個地方在網頁中的座標位置,這就是透過JS去綁定一個事件所達成的,在 JS 中可以綁定很多的事件,比方說 onclick、onmouseover、onkeydown 更多事件可以參考 這個網站

event 得知元素資訊

以上面的例子來說要如何做到得知點擊某一處取得這個元素的座標位置呢?
可以來看看下面這個程式碼:
HTML

var el = document.querySelector('.btn');
el.onclick = function(e){
console.log(e);
alert("您好");
}
這邊可以看到在 function 內有放一個 e 這就是 event 可以把抓取到的事件資訊當作參數放進這個函式內,當然也可以寫成 function(event) 但通常都簡寫成 e 在我們點擊後除了會跳出一個您好的訊息視窗外,透過 console 從瀏覽器的檢查工具中看到還抓到了一些資訊在裡面,像是下面這些資訊:

console.log 資訊

有了這些資訊後,我們就可以去取得裡面的資訊來顯示目前滑鼠所在的座標位置,又或者在開發一個應用程式時,有時候會設置快捷鍵比方說按住 Alt+空白鍵 就能快速的啟動一些功能,再開發程式時就先對這些指令去做設置,當使用者正確的打組合鍵就能觸發某些功能,這就是事件的一些應用囉!

今天就簡略的分享到這邊,主要是先讓大家有個概念,後續會再分享更多關於事件你需要知道的事情,明天見囉!


上一篇
Day21- 插入 HTML 標籤的兩種方法
下一篇
Day23- 事件監聽
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言