WebAPI(part3)--事件基础
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part3)--事件基础
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學(xué)習(xí)筆記，僅供參考，有錯必糾
參考自：pink老師教案
文章目錄
- Web API
- 事件基礎(chǔ)
- 事件三要素
- 執(zhí)行事件的步驟
- 常見的鼠標事件
Web API
事件基礎(chǔ)
JavaScript使我們有能力創(chuàng)建動態(tài)頁面，而事件是可以被JavaScript偵測到的行為。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件，例如，我們可以在用戶點擊某按鈕時產(chǎn)生一個事件，然后去執(zhí)行某些操作。
事件三要素
- 事件源(誰)：觸發(fā)事件的元素；
- 事件類型(什么事件)： 例如 click 點擊事件；
- 事件處理程序(做啥)：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)，事件處理函數(shù)；
舉個例子：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title> </head><body><button id="btn">安徽財經(jīng)大學(xué)</button><script>// 點擊一個按鈕，彈出對話框// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素//(1) 事件源 事件被觸發(fā)的對象 誰 按鈕var btn = document.getElementById('btn');//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標點擊(onclick) 還是鼠標經(jīng)過 還是鍵盤按下//(3) 事件處理程序 通過一個函數(shù)賦值的方式 完成btn.onclick = function() {alert('統(tǒng)計與應(yīng)用數(shù)學(xué)學(xué)院');}</script> </body></html>頁面：
執(zhí)行事件的步驟
舉個例子：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title><style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div>安徽財經(jīng)大學(xué)</div><script>// 點擊div 控制臺輸出 我被選中了// 1. 獲取事件源var div = document.querySelector('div');// 2.綁定事件 注冊事件// div.onclick // 3.添加事件處理程序 div.onclick = function() {console.log('我被選中了');}</script> </body></html>我點擊3次安徽財經(jīng)大學(xué)，則控制臺顯示3次"我被選中了"：
常見的鼠標事件
總結(jié)
以上是生活随笔為你收集整理的WebAPI(part3)--事件基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebAPI(part2)--获取元素
- 下一篇： etc读取失败怎么办(为什么很多司机不办