對于事件的操作無非是addEvent,fireEvent,removeEvent這三個事 件方法。一般lib都會對瀏覽器的提供的函數(shù)做一些擴(kuò)展,解決兼容性內(nèi)存泄漏等問題。第三個問題就是如何得到domReady的狀態(tài)。
6.1 event的包裹
瀏覽器的事件兼容性是一個令人頭疼的問題。IE的event在是在全局的window下, 而mozilla的event是事件源參數(shù)傳入到回調(diào)函數(shù)中。還有很多的事件處理方式也一樣。
Jquery提供了一個 event的包裹,這個相對于其它的lib提供的有點(diǎn)簡單,但是足夠使用。
代碼如下:
//對事件進(jìn)行包裹。
fix : function(event) {
if (event[expando] == true) return event;//表明事件已經(jīng)包裹過
//保存原始event,同時clone一個。
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;
//加上preventDefault and stopPropagation,在clone不會運(yùn)行
event.preventDefault = function() { ②
// 在原始事件上運(yùn)行
if (originalEvent.preventDefault)
originalEvent.preventDefault();
originalEvent.returnValue = false;
};
event.stopPropagation = function() {
// 在原始事件上運(yùn)行
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
originalEvent.cancelBubble = true;
};
// 修正 timeStamp
event.timeStamp = event.timeStamp || now();
// 修正target
if (!event.target) ③
event.target = event.srcElement || document;
if (event.target.nodeType == 3)//文本節(jié)點(diǎn)是父節(jié)點(diǎn)。
event.target = event.target.parentNode;
// relatedTarget
if (!event.relatedTarget && event.fromElement) ?、?
event.relatedTarget = event.fromElement == event.target
? event.toElement : event.fromElement;
// Calculate pageX/Y if missing and clientX/Y available
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)
新聞熱點(diǎn)
疑難解答
圖片精選