~~~ /* * [DOM事件] * * 1.什么是事件? * 事件就是一件事情或者一個行為（對于元素來說，它的很多事件都是天生自帶的），只要我們去操作這個元素，就會觸發這些行為 * “事件就是元素天生自帶的行為，我們操作元素，就會觸發相關的事件行為” * * 2.事件綁定：給元素天生自帶的事件行為綁定方法，當事件觸發，會把對應的方法執行 * oBox.onclick=function(){} * * 3.元素天生自帶的事件？ * [鼠標事件] * click：點擊 (PC端是點擊，移動端的click代表單擊[移動端使用click會有300MS延遲的問題]) * dblclick：雙擊 * mouseover：鼠標經過 * mouseout：鼠標移出 * mouseenter：鼠標進入 * mouseleave：鼠標離開 * mousemove：鼠標移動 * mousedown：鼠標按下（鼠標左右鍵都起作用，它是按下即觸發，click是按下抬起才會觸發，而且是先把down和up觸發，才會觸發click） * mouseup：鼠標抬起 * mousewheel：鼠標滾輪滾動 * ... * * [鍵盤事件] * keydown：鍵盤按下 * keyup：鍵盤抬起 * keypress：和keydown類似，只不過keydown返回的是鍵盤碼，keypress返回的是ASCII碼值 * input：由于PC端有實體物理鍵盤，可以監聽到鍵盤的按下和抬起，但是移動端是虛擬的鍵盤，所以keydown和keyup在大部分手機上都沒有，我們使用input事件統一代替他們（內容改變事件） * ... * * [表單元素常用的事件] * focus：獲取焦點 * blur：失去焦點 * change：內容改變 * ... * * [其它常用事件] * load：加載完成 * unload * beforeunload * scroll：滾動條滾動事件 * resize：大小改變事件 window.onresize=function(){} 當瀏覽器窗口大小發生改變，會觸發這個事件，執行對應的事情 * ... * * [移動端手指事件] * [touch：單手指操作] * touchstart：手指按下 * touchmove：手指移動 * touchend：手指離開 * touchcancel：因為意外情況導致手指操作取消 * * [gesture：多手指操作] * gesturestart：手指按下 * gesturechange：手指改變 * gestureend：手指離開 * ... * * [H5中的AUDIO/VIDEO音視頻事件] * canplay：可以播放（播放過程中可能出現由于資源沒有加載完成，導致的卡頓） * canplaythrough：資源加載完成，可以正常無障礙播放 * ... */ // box.onclick = function () { // console.log('click'); // }; // box.onmousedown = function () { // console.log('down'); // }; // box.onmouseup = function () { // console.log('up'); // }; // // tempInp.onkeydown = function () { // console.log('ok'); // }; ~~~