JQuery ईवेंट हैंडलर को संलग्न करना ताकि वे पहले ट्रिगर हो जाएं




events binding (5)

क्या कोई jQuery ईवेंट हैंडलर संलग्न करने का कोई तरीका है जैसे हैंडलर किसी भी पूर्व-संलग्न ईवेंट हैंडलर से पहले ट्रिगर किया गया है? मैं इस आलेख में आया, लेकिन कोड काम नहीं करता क्योंकि ईवेंट हैंडलर अब किसी सरणी में संग्रहीत नहीं होते हैं, जो उनके कोड की अपेक्षा करता है। मैंने जो कुछ भी किया था, उसे करने के लिए मैंने एक jQuery एक्सटेंशन बनाने का प्रयास किया, लेकिन यह काम नहीं कर रहा है (ईवेंट अभी भी बाध्य किए गए क्रम में आग लगते हैं):

$.fn.extend({
    bindFirst: function(type, handler) {

        var baseType = type;
        var dotIdx = type.indexOf('.');
        if (dotIdx >= 0) {
            baseType = type.substr(0, dotIdx);
        }

        this.each(function() {
            var oldEvts = {};
            var data = $.data(this);
            var events = data.events || data.__events__;
            var handlers = events[baseType];
            for (var h in handlers) {
                if (handlers.hasOwnProperty(h)) {
                    oldEvts[h] = handlers[h];
                    delete handlers[h];
                    // Also tried an unbind here, to no avail
                }
            }

            var self = $(this);
            self.bind(type, handler);

            for (var h in oldEvts) {
                if (oldEvts.hasOwnProperty(h)) {
                    self.bind(baseType, oldEvts[h]);
                }
            }
        });
    }
});

घटना प्रबंधन को पुन: व्यवस्थित करने का कोई प्राकृतिक तरीका है? यदि नहीं है, तो क्या आप तकनीक के बारे में जानते हैं जो मैं आवेदन कर सकता हूं? मैं jQuery 1.4.1 का उपयोग कर रहा हूं, हालांकि अगर मुझे जरूरी है तो मैं अपग्रेड करूंगा।


@patrick: मैं एक ही समस्या को हल करने की कोशिश कर रहा हूं और यह समाधान वही करता है जो मुझे चाहिए। एक मामूली समस्या यह है कि आपका प्लग-इन नए ईवेंट के लिए नेमस्पेसिंग को संभाल नहीं करता है। इस मामूली चिमटा का ख्याल रखना चाहिए:

परिवर्तन:

var evt = $.data(this, 'events')[type[len]];

सेवा मेरे:

var evt = $.data(this, 'events')[type[len].replace(/\..+$/, '')];

इस बारे में क्या? घटना को बांधें और ऐसा करने से:

handlers.unshift( handlers.pop() );

जैसा कि यहां बताया गया है https://.com/a/35472362/1815779 , आप ऐसा कर सकते हैं:

<span onclick="yourEventHandler(event)">Button</span>

चेतावनी : घटनाओं को बांधने के लिए यह अनुशंसित तरीका नहीं है , अन्य डेवलपर इसके लिए आपको मार सकते हैं।


यहां एक साधारण प्लगइन है जो मैंने थोड़ी देर पहले किया था। आपको सूची की शुरुआत में एक हैंडलर बांधने देता है। यह बहुत आसान है, और मैं गारंटी नहीं दूंगा कि यह नामित घटनाओं या बहुत ही फैंसी के साथ काम करता है।

घटनाओं के एक एकल या अंतरिक्ष अलग समूह को बाध्य करने के लिए, इसे काम करना चाहिए।

उदाहरण: http://jsfiddle.net/gbcUy/

$.fn.bindUp = function(type, fn) {

    type = type.split(/\s+/);

    this.each(function() {
        var len = type.length;
        while( len-- ) {
            $(this).bind(type[len], fn);

            var evt = $.data(this, 'events')[type[len]];
            evt.splice(0, 0, evt.pop());
        }
    });
};

या यदि आप किसी अन्य तरीके से हैंडलर के ऐरे में हेरफेर करना चाहते हैं, तो बस अपने इच्छित तत्व के लिए हैंडलर प्राप्त करें, और इसे वांछित करें, हालांकि आप चाहते हैं:

उदाहरण: http://jsfiddle.net/gbcUy/1/

var clickHandlers = $('img').data('events').click;

clickHandlers.reverse(); // reverse the order of the Array

jQuery.bind-first नामक एक बेहतर प्लगइन है जो मूल, bind , delegate और live विधियों के अनुरूप प्रदान करता है जो पंजीकरण कतार के शीर्ष पर एक ईवेंट को धक्का देते हैं। यह 1.7 और पिछले संस्करणों के बीच घटना पंजीकरण में मतभेदों का भी ध्यान रखता है। यहां इसका उपयोग कैसे करें:

$('button')
    .on     ('click', function() { /* Runs second */ })
    .onFirst('click', function() { /* Runs first  */ });

इन उत्तरों में से अधिकांश के साथ, बड़ा नुकसान यह है कि यह jQuery के आंतरिक ईवेंट पंजीकरण तर्क पर निर्भर करता है और यदि यह बदलता है तो यह आसानी से टूट सकता है-जैसे संस्करण 1.7 में किया गया था! यह आपके प्रोजेक्ट की दीर्घायु के लिए एक समाधान खोजने के लिए बेहतर हो सकता है जिसमें jQuery आंतरिक को अपहृत करने में शामिल नहीं है।

मेरे विशेष मामले में, मैं दो प्लगइन्स को अच्छा खेलने के लिए कोशिश कर रहा था। trigger विधि के लिए प्रलेखन में वर्णित कस्टम घटनाओं का उपयोग करके मैंने इसे संभाला। आप अपनी परिस्थितियों के समान दृष्टिकोण को अनुकूलित करने में सक्षम हो सकते हैं। शुरू करने के लिए यहां एक उदाहरण दिया गया है:

$('button')
    .on('click', function() {
        // Declare and trigger a "before-click" event.
        $(this).trigger('before-click');

        // Subsequent code run after the "before-click" events.
    })
    .on('before-click', function() {
        // Run before the main body of the click event.
    });

और, यदि आपको आवश्यकता हो, तो यहां हैंडलर फ़ंक्शन में दिए गए इवेंट ऑब्जेक्ट पर गुण सेट करने और निष्पादित करने के लिए अंतिम before-click ईवेंट के परिणाम तक पहुंचने का तरीका यहां दिया गया है:

// Add the click event's pageX and pageY to the before-click event properties.
var beforeClickEvent = $.Event('before-click', { pageX: e.pageX, pageY: e.pageY });
$(this).trigger(beforeClickEvent);

// beforeClickEvent.result holds the return value of the last before-click event.
if (beforeClickEvent.result === 'no-click') return;




binding