2016-05-29 48 views
2

我正在尋找一種方法來實現以下功能。我可以建立一些機制來做到這一點,我正在尋求一些內置的或者非常簡單的方法,如果它存在並且我錯過了它。jQuery中的默認事件處理程序

編輯: 請注意,我正在討論隨機對象中的事件,而不是DOM元素。根據可能的副本中的建議,無法使用父級等來管理事件順序。

編輯2: 也許所有的處理程序,被稱爲回調?還是一個總是最後執行的處理程序?

考慮:

var someObject={}; 
$(someObject).on("event",function() { console.log('Default handler'); }); 
... 
$(someObject).on("event",function() { console.log('Other handler'); }); 

做當:

$(someObject).triggerHandler("event"); 

輸出是:

Default handler 
Other handler 

我們都知道這一點。問題是:如果我想將第一個事件設置爲「默認」處理程序,如果沒有其他事件處理程序(在那裏沒有問題)要執行,或者其他處理程序沒有停止事件傳播這是問題)。

我正在尋找一種方法能夠像做:

$(someObject).on("event",function(ev) { ev.preventDefault(); }); 

,並防止第一事件處理程序的執行。在這個例子中沒有給出執行順序。反轉執行順序不是正確的方法。

TL; DR

是否可以設置一個默認的處理器,一個被稱爲萬一有沒有其他的處理程序和事件沒有被取消?

編輯3:爲了給你一個更好的主意,目前的做法是以下(名稱是由這個例子):

var eventCanceled=false; 
function doTheEvent() { 
    $(someObject).triggerHandler("event"); 
    if(!eventCanceled) defaultEventHandler(); 
} 
//To be called inside the handlers to stop the default handler 
function cancelTheEvent() { 
    eventCanceled=true; 
} 

我只是想擺脫這一點,並能直接使用triggerHandler

+0

[優先級當多於一個的事件處理程序被綁定到一個元素(的可能的複製http://stackoverflow.com/questions/8779657/priority-when-more-than-一個事件處理程序是綁定到元素) –

+0

不完全是,請注意,我正在討論隨機對象,而不是DOM元素。 – Gabriel

+0

而不是有兩個相同名稱的事件名稱「」事件「''」事件「'你有沒有想過改成''默認值''和'」事件「' –

回答

0

雖然有a way to detect如果調用preventDefault(),則不存在「默認處理程序」這樣的事情。事件處理程序按照它們註冊的順序執行。所以第一個註冊的是第一個被執行的。

如果您的「默認處理程序」不需要同步執行,您可以延遲「默認處理程序」在所有其他處理程序完成後執行,並在任何其他處理程序恢復,如果有必要:

var defaultHandlerTimeout; 
$element.on('event', function() { 
    defaultHandlerTimeout = setTimeout(function() { 
    // your actual handler 
    }); 
}); 

$element.on('event', function() { 
    // prevent the "default handler" from being executed 
    clearTimeout(defaultHandlerTimeout); 
}); 
0

jQuery確實在內部存儲了所有的事件,您可以使用$._data(elem,'events')訪問特定的元素事件。

這是否會幫助您的情況我不知道,但值得深入挖掘。我個人從來沒有發現需要使用它。

https://stackoverflow.com/a/2518441/1175966

1

希望這是你在找什麼。這被稱爲觀察者模式。

var someObj = {}; 
 
someObj.eventCallbackList = {}; 
 
someObj.createEventObject = function(name) { 
 
    return { 
 
    type: name, 
 
    preventDefault: function() { 
 
     this.callDefault = false; 
 
    }, 
 
    callDefault: true 
 
    } 
 
} 
 
someObj.on = function(eventName, callback, defaultFlag) { 
 
    if (!this.eventCallbackList[eventName]) { 
 
    // there can be multiple other handlers 
 
    this.eventCallbackList[eventName] = { 
 
     other: [], 
 
     default: null 
 
    }; 
 
    } 
 

 
    if (defaultFlag) { 
 
    this.eventCallbackList[eventName]['default'] = callback; 
 
    } else { 
 
    this.eventCallbackList[eventName]['other'].push(callback); 
 

 
    } 
 
} 
 

 
someObj.triggerHandler = function(eventName) { 
 
    var event = this.createEventObject(eventName); 
 
    var callbacks = this.eventCallbackList[eventName]; 
 

 
    if (callbacks) { 
 
    if (callbacks['other']) { 
 
     for (var i = 0; i < callbacks['other'].length; i++) { 
 
     callbacks['other'][i](event); 
 
     } 
 
    } 
 

 
    if (event.callDefault && callbacks['default']) { 
 
     callbacks['default'](event); 
 

 
    } 
 
    } 
 

 

 
} 
 

 

 

 

 
// Test 
 

 
someObj.on('myCustomEvent', function(event) { 
 
    console.log('OtherHandler'); 
 
    event.preventDefault(); 
 
}); 
 

 
someObj.on('myCustomEvent', function(event) { 
 
    console.log('default'); 
 
}, true); 
 

 
$(document).on('click', function() { 
 
    someObj.triggerHandler('myCustomEvent'); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

雖然你沒有使用jQuery的方法,但它是一個非常好的選擇,謝謝。 – Gabriel

+0

這裏沒有辦法使用jquery。 jquery不提供對象的事件處理。他們只是爲了dom。 –

+0

jQuery的確提供對象的事件處理。但這不重要,我沒有抱怨這只是一個評論,很好的工作,謝謝。 – Gabriel

相關問題