欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費電子書(shū)等14項超值服

開(kāi)通VIP
JavaScript 中綁定事件監聽(tīng)函數的通用方法[ addEvent() ]_一直想殺你...
JavaScript 中綁定事件監聽(tīng)函數的通用方法[ addEvent() ]
2010-06-13 13:43

上篇文章講到了事件綁定的3中常用方法:傳統綁定、W3C綁定方法、IE綁定方法。但是,在實(shí)際開(kāi)發(fā)中對于我們來(lái)講重要的是需要一個(gè)通用的、跨瀏覽 器的綁定方法。如果我們在互聯(lián)網(wǎng)上搜索一下會(huì )發(fā)現許多方法,一下是比較知名的幾種方法:

在開(kāi)始學(xué)期下面幾種方法之前,應當討論一下,一個(gè)好的addEvent()方法應當達到哪些要求:

   a、支持 同一元素的同一事件句柄可以綁定多個(gè)監聽(tīng)函數;

   b、如果 在同一元素的同一事件句柄上多次注冊同一函數,那么第一次注冊后的所有注冊都被忽略;

   c、函數 體內的this指向的應當是正在處理事件的節點(diǎn)(如當前正在運行事件句柄的節點(diǎn));

   d、監聽(tīng) 函數的執行順序應當是按照綁定的順序執行;

   e、在函 數體內不用使用 event = event || window.event; 來(lái)標準化Event對象;

一、John Resig 所寫(xiě)的 addEvent() 函數:http://ejohn.org/projects/flexible-javascript-events/

 

 

    function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj[
'e'+type+fn] = fn;
obj[type
+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 
'on'+type, obj[type+fn] );
else
obj.addEventListener( type, fn, 
false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 
'on'+type, obj[type+fn] );
obj[type
+fn] = null;
else
obj.removeEventListener( type, fn, 
false );
}

 

這個(gè)函數如此簡(jiǎn)單易懂,的確非常令人驚訝。那么我們還是要看看上面的五點(diǎn)要求:

   對于第一 點(diǎn)滿(mǎn)足了;

   對于第三 點(diǎn)和第五點(diǎn),肯定也滿(mǎn)足了;

   對于第二 點(diǎn),并沒(méi)有滿(mǎn)足,因為addEventListener()會(huì )忽略重復注冊,而attachEvent()則不會(huì )忽略;

   但是第四 點(diǎn),并沒(méi)有滿(mǎn)足,因為Dom標準沒(méi)有確定調用一個(gè)對象的時(shí)間處理函數的順序,所以不應該想當然的認為它們以注冊的順序調用。

但是這個(gè)函數仍然是一個(gè)非常優(yōu)秀的函數。

二、Dean Edward 所寫(xiě)的 addEvent() 函數 :http://dean.edwards.name/weblog/2005/10/add-event2/

 

function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers 
= element.events[type] = {};
if (element["on" + type]) {
handlers[
0= element["on" + type];
}
}
handlers[handler.$$guid] 
= handler;
element[
"on" + type] = handleEvent;
}

addEvent.guid 
= 1;

function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event 
= event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue 
= false;
}
}
return returnValue;
};

function fixEvent(event) {
event.preventDefault 
= fixEvent.preventDefault;
event.stopPropagation 
= fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault 
= function() {
this.returnValue = false;
};
fixEvent.stopPropagation 
= function() {
this.cancelBubble = true;
};

 

 

該函數使用了傳統的綁定方法,所以它可以在所有的瀏覽器中工作,也不會(huì )造成內存泄露。

        但是對于最初提出的5點(diǎn),該函數只是滿(mǎn)足了前四點(diǎn)。只有最后一點(diǎn)沒(méi)有滿(mǎn)足,因為在JavaScript中對for/in語(yǔ)句的執行順序沒(méi)有規定是按照賦值 的順序執行,盡管大部分時(shí)刻是按照預期的順序執行,因此在不同的JavaScript版本或實(shí)現中這一語(yǔ)句的順序有可能不同。

三、Dean Edward 的 addEvent() 函數的改進(jìn)

 

Array.prototype.indexOf = function( obj ){
var result = -1 , length = this.length , i=length - 1;
for ( ; i>=0 ; i-- ) {
if ( this[i] == obj ) {
result 
= i;
break;
}
}
return result;
}
Array.prototype.contains 
= function( obj ) {
return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append 
= function( obj , nodup ) {
if ( !(nodup && this.contains( obj )) ) {
this[this.length] = obj;
}
}
Array.prototype.remove 
= function( obj ) {
var index = this.indexOf( obj );
if ( !index ) return ;
return this.splice( index , 1);
};
function addEvent(element , type , fun){
if (!element.events) element.events = {};            
    var handlers = element.events[type];
if (!handlers) {
handlers 
= element.events[type] = [];
if(element['on' + type]) {        
            handlers[0= element['on' + type];
}
}
handlers.append( fun , 
true)
element[
'on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
if (element.events && element.events[type]) {
element.events[type].remove(fun); 
}
}
function handleEvent(event) {
var returnValue = true , i=0;
event 
= event || fixEvent(window.event);
var handlers = this.events[event.type] , length = handlers.length;
for ( ; i < length ; i++) {
if ( handlers[i].call( this , event) === false ){
returnValue 
= false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault 
= fixEvent.preventDefault;
event.stopPropagation 
= fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault 
= function() {
this.returnValue = false;
};
fixEvent.stopPropagation 
= function() {
this.cancelBubble = true;
};

 

該函數是本人對Dean Edward 的 addEvent() 函數的改進(jìn),完全滿(mǎn)足了最初提出的5點(diǎn)要求。如果大家有更好的方法,期待分享!

本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請點(diǎn)擊舉報。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
深入淺出js事件
JavaScript--事件綁定及深入(26)
javascript快速入門(mén)17
Spice工作原理及代碼剖析:03 Channel:客戶(hù)端與服務(wù)器通信機制.docx
前端開(kāi)發(fā)面試題之JavaScript
OpenLayers項目分析——(十)事件機制分析-睜眼瞎看-3sNews.Ne...
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久