1 什么是事件

JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

2 把事件綁定給元素

事件監聽方式(標準方式)

addEventListener(Event, fn) (非IE IE9+) attachEvent(Event, fn) (IE8-)

把事件作為元素的方法

dom.onclick = fn

把事件作為標簽的內部屬性

<button onclick="code..">

3 給元素解除事件綁定

標準方式綁定的事件

removeEventListener(event, fn) (IE9+ 非IE) detachEvent(Event, fn) (IE8-)

其他方式綁定

重新綁定事件,用空的函數 覆蓋 前面的 dom.onclick = function(){}

4 this在事件中的作用

• 給一組元素綁定事件
• 在元素內部 通過屬性形式?<button onclick="fn(this)">?此時this表示所在的元素

5 事件列表

5.1 鼠標事件

click 單擊左鍵 dblclick 雙擊 左鍵 contextmenu 右單擊 mouseover 鼠標懸浮 mouseout 鼠標移出 mousedown 鼠標按鍵按下 mouseup 鼠標按鍵抬起 mousemove 鼠標移動

5.2 鍵盤事件

keydown 鍵盤按鍵 按下 keyup 鍵盤按鍵 抬起 keypress 鍵盤按鍵 按下 (只有字符按鍵) (控制按鍵不可以 Ctrl shift 上下左右都不行)

?

5.3 文檔事件

load 加載完成 unload 文檔關閉 beforeunload 文檔關閉 (兼容性好)

?

5.4 表單事件

submit 表單提交的時候, 綁定給form元素 reset 表單重置, 綁定給form元素 blur 失去焦點 focus 獲得焦點 change 表單控制的內容改變 通常綁定給 radio checkbox select 如果綁定給輸入的input, 必須滿足 內容改變和失去焦點才能觸發 select input 或 textarea 內容被選中的時候觸發

5.5 圖片事件

abort 圖片加載中斷 load 圖片加載完成 error 圖片加載錯誤

5.6 其他事件

scroll 元素內部的內容滾動 適合于有滾動條的元素 resize 綁定給window, 窗口尺寸發生變化

6 Event對象

6.1 分類

Event MouseEvent KeyboardEvent FocusEvent ...................

6.2 屬性

• clientX 鼠標的x坐標

• clientY 鼠標的Y坐標

• button 鼠標按鍵的標示

  值 0 按了左鍵 1 按了滾輪 2 按了右鍵

• keyCode 鍵盤按鍵的值

• cancelBubble 阻止事件冒泡 設置為true

• target 返回觸發此事件的元素

• tyep 返回事件類型

• timeStamp 返回觸發事件的那一刻的時間戳(從頁面打開的那一刻開始

• altKey 返回當事件被觸發時，"ALT" 是否被按下。

• ctrlKey 返回當事件被觸發時，"CTRL" 鍵是否被按下。

• shiftKey 返回當事件被觸發時，"SHIFT" 鍵是否被按下。

6.3 方法

• stopPropagation() 阻止事件冒泡

• preventDefault() 阻止元素默認的事件

轉載于:https://www.cnblogs.com/wangcheng9418/p/9487326.html

總結

以上是生活随笔為你收集整理的JavaScript 事件机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。