javascript - Bagaimanakah jQuery melaksanakan off() untuk mengalih keluar acara?

Question

Kami tahu bahawa setiap kaedah mengikat acara dalam jQuery mempunyai kaedah yang sepadan untuk mengalih keluar pengikatan acara Contohnya, off() sepadan dengan on(), unbind() sepadan dengan bind(), dan die() sepadan dengan live. (). Sangat Saya ingin tahu tentang bagaimana pembongkaran acara tanpa nama ini dilaksanakan Kod sumber jQuery terlalu esoterik dan sukar untuk difahami.

Answer 1

Saya fikir untuk memahami pemprosesan luar, anda mesti memahami operasi semasa saya membaca kod sumber jquery2.x tahun lepas, dan aspek acara agak rumit.

Saya melihat melalui nota kasar saya dan mendapati bahawa video yang menerangkan kejadian itu tidak menyebut apa-apa mengenainya yang perlu saya tonton.

Mengenai peristiwa mengikat, anda boleh menggabungkan pelaksanaan kod sumber dan kaedah jquery.event.add:

Pemahaman saya ialah jquery terutamanya menetapkan cache data cache untuk elemen Cache menyimpan pembolehubah acara (kumpulan baris gilir panggilan balik), yang disimpan dalam bentuk "peristiwa": "tatasusunan fungsi panggil balik" untuk menambah beberapa kali pada DOM tertentu. . Apabila peristiwa berlaku, panggilan balik boleh dicetuskan, tetapi apa yang sebenarnya terikat kepada peristiwa asli ialah pelaksanaan traversal tatasusunan fungsi panggil balik.

Untuk off, mari kita lihat bahagian kod sumber off terlebih dahulu:

off: function( types, selector, fn ) {
        var handleObj, type;
        if ( types && types.preventDefault && types.handleObj ) {
            // ( event )  dispatched jQuery.Event
            handleObj = types.handleObj;
            jQuery( types.delegateTarget ).off(
                handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
                handleObj.selector,
                handleObj.handler
            );
            return this;
        }
        if ( typeof types === "object" ) {
            // ( types-object [, selector] )
            for ( type in types ) {
                this.off( type, selector, types[ type ] );
            }
            return this;
        }
        if ( selector === false || typeof selector === "function" ) {
            // ( types [, fn] )
            fn = selector;
            selector = undefined;
        }
        if ( fn === false ) {
            fn = returnFalse;
        }
        return this.each(function() {
            jQuery.event.remove( this, types, fn, selector );
        });
    },

Apabila anda melihat ayat terakhir, anda tahu bahawa ia sebenarnya memanggil kaedah jQuery.event.remove.

membuang kaedah

remove: function( elem, types, handler, selector, mappedTypes ) {

        var j, origCount, tmp,
            events, t, handleObj,
            special, handlers, type, namespaces, origType,
            elemData = data_priv.hasData( elem ) && data_priv.get( elem );

        if ( !elemData || !(events = elemData.events) ) {
            return;
        }

        // Once for each type.namespace in types; type may be omitted
        types = ( types || "" ).match( core_rnotwhite ) || [""];
        t = types.length;
        while ( t-- ) {
            tmp = rtypenamespace.exec( types[t] ) || [];
            type = origType = tmp[1];
            namespaces = ( tmp[2] || "" ).split( "." ).sort();

            // Unbind all events (on this namespace, if provided) for the element
            if ( !type ) {
                for ( type in events ) {
                    jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
                }
                continue;
            }

            special = jQuery.event.special[ type ] || {};
            type = ( selector ? special.delegateType : special.bindType ) || type;
            handlers = events[ type ] || [];
            tmp = tmp[2] && new RegExp( "(^|\.)" + namespaces.join("\.(?:.*\.|)") + "(\.|$)" );

            // Remove matching events
            origCount = j = handlers.length;
            while ( j-- ) {
                handleObj = handlers[ j ];

                if ( ( mappedTypes || origType === handleObj.origType ) &&
                    ( !handler || handler.guid === handleObj.guid ) &&
                    ( !tmp || tmp.test( handleObj.namespace ) ) &&
                    ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
                    handlers.splice( j, 1 );

                    if ( handleObj.selector ) {
                        handlers.delegateCount--;
                    }
                    if ( special.remove ) {
                        special.remove.call( elem, handleObj );
                    }
                }
            }

            // Remove generic event handler if we removed something and no more handlers exist
            // (avoids potential for endless recursion during removal of special event handlers)
            if ( origCount && !handlers.length ) {
                if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
                    jQuery.removeEvent( elem, type, elemData.handle );
                }

                delete events[ type ];
            }
        }

        // Remove the expando if it's no longer used
        if ( jQuery.isEmptyObject( events ) ) {
            delete elemData.handle;
            data_priv.remove( elem, "events" );
        }
    },

Lakukan operasi terutamanya seperti memadam pasangan nilai kunci acara daripada pembolehubah peristiwa yang disimpan dalam cache apabila elemen dihidupkan sebelum ini.

Jika ia hanya $(xx).off('click'), maka ia adalah untuk melintasi dan memadamkan kumpulan fungsi panggil balik yang sepadan dengan acara klik dalam acara Jika parameter mati juga melepasi fungsi panggil balik tertentu, maka ia adalah untuk melintasi dan membandingkan tatasusunan panggil balik dan memadam fungsi panggil balik yang sepadan

Untuk kod sumber jquery, adalah disyorkan untuk menonton video Bilik Darjah Miaowei untuk bahagian asas awal Untuk maklumat lain, anda boleh menonton catatan blog Daniel di http://www.cnblogs.com/aaronj... atau pembelian. buku serupa tentang analisis kod sumber jquery.

Kod sumber melibatkan terlalu banyak butiran, dan saya tidak akan dapat menyelesaikannya untuk seketika = =, jadi saya akan menyatakan perkara umum... Sila betulkan saya jika saya mempunyai sebarang salah faham~

Answer 2

Berikut ialah kod on

function on( elem, types, selector, data, fn, one ) {
    var origFn, type;

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {

        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) {

            // ( types-Object, data )
            data = data || selector;
            selector = undefined;
        }
        for ( type in types ) {
            on( elem, type, selector, data, types[ type ], one );
        }
        return elem;
    }

    if ( data == null && fn == null ) {

        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        if ( typeof selector === "string" ) {

            // ( types, selector, fn )
            fn = data;
            data = undefined;
        } else {

            // ( types, data, fn )
            fn = data;
            data = selector;
            selector = undefined;
        }
    }
    if ( fn === false ) {
        fn = returnFalse;
    } else if ( !fn ) {
        return elem;
    }

    if ( one === 1 ) {
        origFn = fn;
        fn = function( event ) {

            // Can use an empty set, since event contains the info
            jQuery().off( event );
            return origFn.apply( this, arguments );
        };

        // Use same guid so caller can remove using origFn
        fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
    }
    return elem.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    } );
}