JS中的事件入門

1 事件

事件可以理解爲用戶和瀏覽器的交互行爲

2 事件函數綁定
事件函數: 當事件發生了,用於處理該事件的具體應對方案就是事件處理函數
表現出來就是一些代碼塊
例如: 當鼠標點擊(事件)— 做什麼操作?就由事件處理函數來完成
當鍵盤按下(按回車鍵)— 做什麼操作?

總結:注意的就是 事件發生和事件處理函數是不同的概念
事件發生以後,可以有事件處理函數來做對應的事情,也可以沒有
如果沒有事件處理函數,不會影響事件的發生,該發生的還是會發生,
至於做什麼事情,由事件處理函數來決定

3 如何去學習事件
1 在js中規定了一些常用的事件,例如:鼠標點擊、鼠標按下、鼠標擡起、鼠標移動
、鼠標移入移出…
事件要掌握的兩部分: 1)事件名稱(onclick\onmouseover) 2)對應的觸發場景
事件的名稱和觸發場景必須要記住(多做練習,手抄寫)

2 事件處理函數(功能)
  需要根據具體業務場景來實現

4 鼠標事件
和鼠標相關的事件

事件名稱        事件的觸發場景

onmousedown     當鼠標按下的時候觸發
onmouseup       當鼠標擡起的時候觸發
onmouseover     當鼠標移入的時候觸發
onmouseout      當鼠標移出的時候觸發
onclick         當鼠標點擊的時候觸發
ondblclick      當鼠標雙擊的時候觸發
onmousemove     當鼠標移動的時候觸發
oncontextmenu   當鼠標右鍵的時候觸發(可以自定義右鍵菜單)

5 鍵盤事件
和鍵盤有關的事件 鍵盤(按鍵)按下 鍵盤擡起
onkeydown 當鍵盤按下的時候觸發
onkeyup 當鍵盤擡起的時候觸發

6 表單事件
和表單有關的事件 表單提交 獲取焦點 失去焦點

onsubmit     當表單提交的時候觸發
onchange     當修改表單字段的時候觸發(內容改變就會觸發)
onfocus      當獲取到焦點的時候觸發
onblur        當失去焦點的時候觸發

7 窗口事件
和窗口有關的事件 窗口加載 窗口改變

onload      當對象加載完成以後觸發
onresize    當窗口改變的時候觸發

8 事件對象 event
事件對象就是當事件發生的時候,用來記錄事件的相關信息的對象
事件對象理解爲:飛機的黑匣子和汽車的行車記錄儀

重點:記住兼容性解決方案 var ev = ev || event
keyCode 鍵盤碼 回車 13 空格 32 控制方向
clientX、clientY 鼠標在瀏覽器可視區的座標
offsetLeft、offsetTop

9 事件冒泡
事件冒泡機制–現象
事件冒泡帶來的影響
阻止事件冒泡
事件冒泡的應用

創建元素、添加子元素
事件源
事件委託
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章