生活随笔
收集整理的這篇文章主要介紹了
jquery event 封装的源源分析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對于javascript事件擴展，所有的lib都差不多。和jquery和prototype,yui和Ext，其要解決的首要問題是兼容性，所有lib都會對event進行包裹，統一其屬性解決其兼容性。對于事件的操作無非是addEvent,fireEvent,removeEvent這三個事件方法。一般lib都會對瀏覽器的提供的函數做一些擴展，解決兼容性內存泄漏等問題。第三個問題就是如何得到domReady的狀態。 ??6.1?event的包裹 ??瀏覽器的事件兼容性是一個令人頭疼的問題。IE的event在是在全局的window下，而mozilla的event是事件源參數傳入到回調函數中。還有很多的事件處理方式也一樣。 ??Jquery提供了一個?event的包裹，這個相對于其它的lib提供的有點簡單，但是足夠使用。 ????????fix?:?function(event)?{ ??????????if?(event[expando]?==?true)?return?event;????????????????????var?originalEvent?=?event;???????????????????????????????① ??????????event?=?{???originalEvent?:?originalEvent}; ??????????for?(var?i?=?this.props.length,?prop;i;)?{ ??????????????prop?=?this.props[--i]; ??????????????event[prop]?=?originalEvent[prop]; ??????????}??????? ??????????event[expando]?=?true;?????? ????????????????????event.preventDefault?=?function()?{???????????????????② ????????????????????????????if?(originalEvent.preventDefault) ??????????????????originalEvent.preventDefault(); ??????????????originalEvent.returnValue?=?false; ??????????}; ??????????event.stopPropagation?=?function()?{ ????????????????????????????if?(originalEvent.stopPropagation) ??????????????????originalEvent.stopPropagation(); ??????????????originalEvent.cancelBubble?=?true; ??????????}; ????????????????????event.timeStamp?=?event.timeStamp?||?now(); ????????????????????if?(!event.target)???????????????????????????????????????③ ??????????????event.target?=?event.srcElement?||?document;???????????? ??????????if?(event.target.nodeType?==?3)??????????????event.target?=?event.target.parentNode; ????????????????????if?(!event.relatedTarget?&&?event.fromElement)??????④ ??????????????event.relatedTarget?=?event.fromElement?==?event.target ????????????????????????event.toElement???:?event.fromElement; ????????????????????if?(event.pageX?==?null?&&?event.clientX?!=?null)?{??⑥ ??????????????var?doc?=?document.documentElement,?body?=?document.body; ????????????event.pageX?=?event.clientX ??????????????????+?(doc?&&?doc.scrollLeft?||?body?&&?body.scrollLeft?||?0) ??????????????????????-?(doc.clientLeft?||?0); ??????????????event.pageY?=?event.clientY ??????????????????+?(doc?&&?doc.scrollTop?||?body?&&?body.scrollTop?||?0) ??????????????????????-?(doc.clientTop?||?0); ??????????} ??????????????????if?(!event.which????&&?((event.charCode?||?event.charCode?===?0)?⑦ ????????????????????????????event.charCode????:?event.keyCode)) ??????????????event.which?=?event.charCode?||?event.keyCode; ??????????????????if?(!event.metaKey?&&?event.ctrlKey)????????????????????????⑧ ??????????????event.metaKey?=?event.ctrlKey; ??????????????????????if?(!event.which?&&?event.button)??????????????????????????⑨ ??????????????event.which?=?(event.button?&?1???1?:?(event.button?&?2????????????????????????3?:?(event.button?&?4???2?:?0))); ??????????return?event; ??????}, ??上面的代碼①處保留原始事件的引用，同時clone原始事件。在這個clone的事件上進行包裹。②處在原始事件上運行preventDefault?和?stopPropagation兩個方法達到是否阻止默認的事件動作發生和是否停止冒泡事件事件向上傳遞。 ??③處是修正target個，IE中采用srcElement，同時對于文本節點事件，應該把target傳到其父節點。 ??④處relatedTarget只是對于mouseout、mouseover有用。在IE中分成了to和from兩個Target變量，在mozilla中沒有分開。為了保證兼容，采用relatedTarget統一起來。 ??⑥處是進行event的坐標位置。這個是相對于page。如果頁面可以scroll，則要在其client上加上scroll。在IE中還應該減去默認的2px的body的邊框。 ??⑦處是把鍵盤事件的按鍵統一到event.which的屬性上。Ext中的實現ev.charCode?||?ev.keyCode?||?0;?⑨則是把鼠標事件的按鍵統一把event.which上。charCode、ev.keyCode一個是字符的按鍵，一個不是字符的按鍵。⑨處采用&的方式來進行兼容性的處理。?Ext?通過下面三行解決兼容問題。 ????var?btnMap?=?Ext.isIE???{1:0,4:1,2:2}?:?(Ext.isSafari???{1:0,2:1,3:2}?:?{0:0,1:1,2:2});?this.button?=?e.button???btnMap[e.button]?:?(e.which???e.which-1?:?-1); ??①②③④⑤⑥⑦⑧⑨⑩??
總結
以上是生活随笔為你收集整理的jquery event 封装的源源分析的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
