首頁  >  文章  >  web前端  >  JS中的事件入門講解

JS中的事件入門講解

小云云
小云云原創
2018-02-27 14:21:341225瀏覽

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 事件冒泡
   事件冒泡機制–現象
   事件冒泡帶來的影響

   阻止事件冒泡

事件冒泡的應用

创建元素、添加子元素
事件源
事件委托

相關推薦:

JS與Node.js中的事件循環詳解

##node.js中的事件處理機制詳解

js中的事件捕捉模型與冒泡模型實例分析_javascript技巧

####

以上是JS中的事件入門講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn