JS-----DOM事件

文檔或瀏覽器窗口 發生的一些特定的交互瞬間 能夠監聽事件 來實現事件發生時執行特定的操做

1. 鼠標事件 鼠標動時觸發的事件

• 元素.onclick = function{} 單機事件
• 元素.ondbclick = function(){} 雙擊事件
• 元素.onmouseenter = function(){} 鼠標移入
• 元素.onmouseleave = function(){}鼠標移出
• 元素.onmouseover = function(){} 鼠標滑過
• 元素.onmouseout = function () {} 鼠標劃出
• 元素.onmousemove = function () {} 鼠標移動
• 元素.onmousedown = function () {} 鼠標按下
• 元素.onmmouseup = function () {} 鼠標擡起
• 元素.onmousewheel = function () {} 鼠標滾輪滾動

2. 鍵盤事件 input、textarea、document.body、document、window、document.documentElement 監聽鍵盤事件

• 元素.onkeydown = function() {} 鍵盤按下
• 元素.onkeyup = function () {} 鍵盤擡起

3. 表單元素事件

• onfocus 獲取焦點（光標）事件
• onblur 失去焦點時觸發
• onchange 事件，表單的值（value）發生改變時觸發
• oninput input、textarea 等元素的輸入事件

4. 系統事件

• window.onload 頁面中全部的資源所有加載完觸發
• window.onresize 當前窗口尺寸發生改變時觸發
• window.onsroll 滾動條滾動時觸發

5. 移動端事件

• ontouchstart 觸摸元素時觸發
• ontouchend 離開元素時觸發
• ontouchmove 滑動時觸發
• 移動端使用 click 大概有 300ms 的延遲

事件對象

在事件觸發時 瀏覽器傳遞給事件函數的實參 其中包含了本次事件觸發的具體信息

• e.clientX 鼠標點擊的位置相對於當前瀏覽器可視窗口的 左偏移值
• e.clientY 鼠標點擊位置相對於當前瀏覽器可視窗口的 上偏移值
• e.pageX 鼠標點擊位置相對於 body 左邊緣的偏移值
• e.pageY 鼠標點擊位置相對於 body 上邊緣的偏移值
• e.target 觸發事件的元素（點擊事件中是點擊的元素）對象，稱爲事件源
• IE 事件觸發時把事件信息掛載在 window.event 這個屬性上
• e.keyCode 鍵碼：鍵盤上每一個鍵對應一個鍵碼，當 keydown 事件觸發時

默認事件 和 默認行爲

• e.preventDefault(); 阻止元素的事件默認行爲
• IE 低版本：e.returnValue = false
• return false; return false 也能夠阻止默認行爲

事件觸發過程

• 捕獲階段 事件觸發時，瀏覽器先從最外層的元素開始找，一直找到事件源的過程稱爲捕獲階段
• 目標階段
• 冒泡事件 觸發事件源綁定事件後開始向上冒泡，依次觸發父級元素的該事件
• 元素.onXXX = func... 綁定的事件都是 DOM0 級事件，DOM0 級事件都是綁定在冒泡階段的
• 取消冒泡 e.stopPropagation()
  • IE低版本下 e.cancelBubble = true;
  • 取消冒泡後，事件不會再向上傳播；更高層級的元素的對應事件不會觸發
  • over 屬於劃過事件，從父元素進入子元素，屬於離開了父元素
  • enter 屬於進入，從父元素進入子元素，不算離開父元素，不會觸發父元素的 leave 事件 父子嵌套的這種狀況，使用 over 會觸發不少不可控的狀況，使用 enter 更加簡單

onload 和 DOMContentLoaded

• a.onload事件 加載成功後執行
• window.onload 當頁面中全部資源所有加載完成後再執行
• a. DOMContentLoaded 只要頁面中的DOM結構加載完成後就觸發
• JS是用來操做DOM的 通常須要在DOM加載完成以後再執行JS

事件委託

• 把事件綁定給父級元素或者更高級元素，而後根據e.target事件源做出不一樣操做
• 利用事件的冒泡傳播機制，給裏面的每一個子元素綁定相同的事件行爲，把事件綁定給他們共同的上級元素，而後利用e.target區分具體觸發事件的元素，而後作不一樣的操做