js事件機制

1事件機制 1.1常見事件類型 鼠標事件類型 onclick ondblclick onmousedown:鼠標按下時觸發 onmousemove:鼠標移動時觸發 onmouseup:鼠標擡起時觸發 onmouseover:鼠標移到元素上時觸發 onmouseout:鼠標移出元素時觸發 onmouseenter:鼠標移入元素內觸發,觸發一次 onmouseleave:鼠標移出元素時觸發一次 oncontextmenu:鼠標右鍵時出現菜單時觸發 鍵盤事件類型 onkeydown:當用戶按下鍵盤上任意鍵觸發，若是按住不放，會重複觸發 onkeypress:當用戶按下鍵盤上的字符鍵觸發，若是按住不放，會重複觸發 onkeyup:當用戶釋放鍵盤上的鍵觸發 HTML事件 onload:當頁面（包含圖片資源、音頻、視頻等資源）徹底加載後在window 上面觸發，或當框架集加載完畢後在框架集上觸發。 onresize:窗口調整大小是觸發 onscroll:當窗口的滾動條滾動時觸發 HTML 表單事件 onselect: 當用戶選擇文本框(input 或textarea)中的一個或多個字符觸發並鬆開鼠標時觸發 onchange: 當文本框(input 或textarea)內容改變且失去焦點後觸發或者Select 選中的內容變化 oninput:當用戶輸入是開始執行 onfocus:當元素獲取焦點時觸發 onblur:當元素失去焦點時觸發 focus/blur事件能夠用在window上，當用戶切出標籤或者最小化win窗口時，觸發blur，當用戶切回標籤或者切回窗口時觸發。 onsubmit:當用戶提交(單擊提交按鈕)表單時觸發 onreset:當用戶點擊reset按鈕時觸發 模擬事件 模擬事件就是和事件觸發時的效果同樣，但不是事件而是對象的一個方法。 input.focus() 讓input獲取焦點 input.blur 讓input失去焦點 button.click() 讓按鈕等元素被單擊 form.submit() 讓表單被提交 form.reset() 讓表單被重置 1.2事件流 1.2.1事件流原理 事件流分三個階段:事件捕獲階段、目標階段、冒泡階段 事件捕獲階段:當一個事件發生了，從HTML最外層(body)向目標元素靠近的階段。 目標階段：事件處於目標元素時 冒泡階段：事件從目標元素流向body的階段 事件流原理 事件處理程序:事件處理程序就是對一個事件進行響應的程序。開發者能夠經過綁定的方式給一個元素添加一個事件處理程序。 dom.addEventListener(eventType,listener,useCapture):給元素添加一個事件監聽者。 eventType:事件類型 listener:監聽者 => 監聽程序 useCapture:執行時機。true:捕獲階段執行 false:冒泡階段執行 在事件流動的過程當中，開發者能夠綁定事件處理程序。 1.2.2兼容性 addEventListener IE 非IE addEventListener IE九、IE十、IE十一、Edge ✔ Chrome/firefox/safari/opera ✔ attachEvent IE五、IE六、IE七、IE8 ✔ ✘ attachEvent的事件處理程序默認就是冒泡階段執行，IE5-IE8不支持捕獲階段。 function addEvent(aDom,type,fun){ if(aDom.addEventListener){ aDom.addEventListener(type,fun,false); }else if(aDom.attachEvent){ aDom.attachEvent("on"+type,fun); }else{ aDom.setAttribute("on"+type,fun); } } 能夠給一個Dom設置多個監聽者,先監聽的先處理。 // 能夠給一個對象設置多個監聽者 oMain.addEventListener("click",function(){ console.log("main1") },false); oMain.addEventListener("click",function(){ console.log("main2") },false); 1.3事件對象 事件對象是事件執行過程當中的一個對象，包含事件的一些特定信息。 通常鼠標事件產生MouseEvent對象，鍵盤事件產生KeyboardEvent，MouseEvent和KeyBoardEvent都繼承了Event對象，其中Event對象存儲共有的屬性。 type:事件類型 cancelBubble:關閉冒泡機制 target/srcElement:目標元素 1.3.1事件的目標元素 target/srcElement 能夠獲取事件的目標元素，其存在兼容性。 e.target for w3c/ie9/ie9+ e.srcElement for ie6/ie7/ie8 var target = e.target || e.srcElement 1.3.2阻止事件冒泡 阻止事件冒泡就是在事件的冒泡階段，不在讓事件繼續向上傳遞。 e.stopPropagation for w3c/ie9/ie9+ e.cancelBubble for ie6/ie7/ie8 function stopBubble(event){ if(event.stopPropagation){ // for w3c/ie9/ie9+ event.stopPropagation(); }else{ event.cancelBubble = true; } } 1.3.3阻止默認事件 一些元素例如a、submit、reset等元素都存在默認事件，若是要阻止默認事件 event.preventDefault event.returnValue = false 在事件處理程序中，若是讓事件處理程序直接返回false，能夠阻止默認事件。且兼容ie6/ie7/ie8 <a id="test" href="###" onclick="javascript:return false;">百度</a> 1.3.4事件委託(事件代理) 通俗地講，就是當你須要完成某件事時，因爲時間或者其餘緣由致使你不能直接去作這件事，此時你委託別人幫你完成這件事。幫你完成這件事的人就是委託者。 事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件 addEvent(oMsgs,"click",function(event){ var e = event||window.event; var target = e.target || e.srcElement; // console.log(target); if(target.nodeName.toLowerCase() === 'a'){ var oLi = target.parentNode.parentNode; var start = oLi.offsetHeight; var end = 0; var change = end - start; animateFn(start,change,oLi,function(){ oMsgs.removeChild(oLi); }); } stopBubble(e); }); 1.3.5MouseEvent clientX/clientY screenY/screen 1.3.6KeyboardEvent keyboardevent中特有屬性 key:表示按鍵盤上的任意鍵 keyCode:鍵盤標號。a-65/回車-13/空格-32/ crtlKey/altKey/shiftKey:默認是false，若是按了就是true // 添加快捷鍵ctrl+enter提交 addEvent(document,"keyup",function(event){ var e = event||window.event; if(e.ctrlKey && e.keyCode == 13){ // console.log("提交"); sendMsg(); } }); 1.4DOM ready DOMContentLoaded表示文檔結構加載完成時執行，不等待stylesheets, images, and subframes加載結束。咱們把這個過程稱爲DOM ready。 ie6/7/8 瀏覽器經過document的onreadystatechange事件監測dom是否加載完成 function addDomContentLoadedEvent(fn){ // for w3c if(document.addEventListener){ console.log("addEventListener"); document.addEventListener("DOMContentLoaded",function(event){ fn && fn(e); },false); }else if(document.attachEvent){ // for ie6/7/8 document.attachEvent("onreadystatechange",function(){ if(document.readyState === 'complete'){ fn && fn(window.event); } }); } } 1.5MouseWheel onmousewheel:當鼠標滾輪滾動時觸發，ie6/7/8/9/9+、edge、chrome、safari、opera wheelDelta:表示滾輪的滾動，向上滾動一格+120；向下滾動一格-120 firefox 經過DOMMouseScroll事件支持。 detail:表示滾動的滾動，向上滾動一格-3；向下滾動一格+3 function wheelFn(fn){ var down = false; if(window.navigator.userAgent.indexOf("Firefox") > -1){ document.addEventListener("DOMMouseScroll",function(event){ var e = event || window.event; if(e.detail > 0){ down = true; }else{ down = false; } fn && fn(down); },false); }else{ document.onmousewheel = function(event){ var e = event||window.event; console.log(e.wheelDelta); if(e.wheelDelta < 0){ down = true; }else{ down = false; } fn && fn(down); } } } 1.6TouchEvent 在移動端(手機、平板)，能夠經過手勢的來操做設備。 touchstart:當手指觸摸屏幕時觸發；即便已經有一個手指放在了屏幕上也會觸發。 touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。 touchend:當手指從屏幕上移開時觸發。 touchcanel:當手持設備來電話、自動關機時觸發，通常不用。 Touch事件也擁有事件對象(TouchEvent),其中包含一個Touches數組，裏面存的是手指(Touch) Touch中有一些屬性 clientX:觸摸目標在視口中的X座標。 clientY:觸摸目標在視口中的Y座標。 identifier：表示觸摸的惟一ID。 pageX：觸摸目標在頁面中的x座標。 pageY：觸摸目標在頁面中的y座標。 screenX:觸摸目標在屏幕中的x座標。 screenY:觸摸目標在屏幕中的y座標。 target:觸摸的DOM節點座標 oMain.addEventListener("touchstart",function(event){ // event是TouchEvent類型 console.log(event); var touch = event.touches[0]; var startX = touch.clientX; var startY = touch.clientY; var left = this.offsetLeft; var top = this.offsetTop; function move(event){ var touch = event.touches[0]; var endX = touch.clientX; var endY = touch.clientY; var dltX = endX - startX; var dltY = endY - startY; this.style.left = (left + dltX) +'px'; this.style.top = (top+dltY)+'px'; } oMain.addEventListener("touchmove",move,false); oMain.addEventListener("touchend",function(){ // console.log("end"); oMain.removeEventListener("touchmove",move,false); },false); },false); 研究Touch.js Hammer.js 1.7碰撞檢測 [1]必定要定位 [2]必定要計算上下左右的距離 1.7.1設備相關(C) window.addEventListener("deviceorientation",function(){ div1.innerHTML=event.alpha; // alpha,beta,gamma },false)