在jQuery中将多个事件附加到单个函数

Question

I'm looking for the opposite of that everyone's been looking for. I have this anonymous jQuery function that I want to keep that way, but I want to attach multiple events handlers to it on different events (two events exactly).

1. When the textarea has text inside it changed ( keyup )
2. When document is clicke ( click ).

I know that grabbing the callback function and putting it in a function declaration, then using the function on both cases would do the job, but is there something around that wont require me to put the callback function in a normal function and just leave it as is?

This is the code I currently have:

urls.keyup(function(){
    delay('remote', function(){
        if (urls.val().length >= char_start)
        {           
            var has_lbrs = /\r|\n/i.test(urls.val());

            if (has_lbrs)
            {
                urls_array = urls.val().split("\n");

                for (var i = 0; i < urls_array.length; i++)
                {
                    if (!validate_url(urls_array[i]))
                    {
                        urls_array.splice(i, 1);
                        continue;   
                    }
                }
            }
            else
            {
                if (!validate_url(urls.val()))
                {
                    display_alert('You might have inserted an invalid URL.', 'danger', 3000, 'top');
                    return; 
                }
            }

            final_send = (has_lbrs && urls_array.length > 0) ? urls_array : urls.val();

            if (!final_send)
            {
                display_alert('There went something wrong while uploading your images.', 'danger', 3000, 'top');
                return; 
            }

            var template = '<input type="text" class="remote-progress" value="0" />';

            $('.pre-upload').text('').append(template);
            $('.remote-progress').val(0).trigger('change').delay(2000);
            $('.remote-progress').knob({
                'min':0,
                'max': 100,
                'readOnly': true,
                'width': 128,
                'height': 128,
                'fgColor': '#ad3b3b',
                'bgColor': '#e2e2e2',
                'displayInput': false,
                'cursor': true,
                'dynamicDraw': true,
                'thickness': 0.3,
                'tickColorizeValues': true,
            });

            var tmr = self.setInterval(function(){myDelay()}, 50);        
            var m = 0;

            function myDelay(){
                m++;
                $('.remote-progress').val(m).trigger('change');

                if (m == 100) 
                {            
                    // window.clearInterval(tmr);
                    m = 0;
                }
            }

            $.ajax({
                type: 'POST',
                url: 'upload.php',

                data: {
                    upload_type: 'remote',
                    urls: JSON.stringify(final_send),
                    thumbnail_width: $('.options input[checked]').val(),
                    resize_width: $('.options .resize_width').val(),
                    album_id: $('#album_id').val(),
                    usid: $('#usid').val(),
                },

                success: function(data) {
                    // console.log(data); return;
                    var response = $.parseJSON(data);

                    if (response) 
                    {
                        $('.middle').hide();
                        $('.remote-area').hide();
                        window.clearInterval(tmr);
                    }

                    if ('error' in response)
                    {
                        //console.log(response.error);

                        if (!$('.top-alert').is(':visible'))
                        {
                            display_alert(response.error, 'danger', 3000, 'top');
                        }

                        return;
                    }

                    if (!target.is(':visible'))
                    {
                        target.show().addClass('inner');
                    }
                    else
                    {
                        target.addClass('inner');
                    }

                    for (var key in response) 
                    {
                        var image_url = response[key];

                        var thumb_uri = image_url.replace('/i/', '/t/');
                        var forum_uri = '[img]' + image_url + '[/img]';
                        var html_uri  = '&lt;a href=&quot;' + image_url + '&quot;&gt;' + image_url + '&lt;/a&gt;';

                        var view_url  = image_url.replace(/store\/i\/([A-Za-z0-9]+)(?=\.)/i, "image/$1");
                        view_url = strstr(view_url, '.', true);

                        // Append the upload box
                        target.append(upload_box(key));

                        // Hide knob
                        $('.knobber').hide();

                        // Put the image box
                        putImage($('.' + key), view_url, image_url, thumb_uri, forum_uri, html_uri);
                    }
                },
            }); 
        }

    }, 2000); // Delay
}); // Remote upload

How do I make this code run on document click as well?

Thank you.

Answer 1

As you yourself has said in you question, the answer is to create an external named reference to the callback function and use it as the callback.

Like

jQuery(function () {
    function callback(e) {
        console.log('event2', e.type);
    }
    $('input').keyup(callback);
    $(document).click(callback)
})

But since you have asked for a different style have a look at, it essentially does the same as the above one

jQuery(function () {
    var callback;
    $('input').keyup(callback = function (e) {
        console.log('event', e.type);
    });
    $(document).click(callback)
})

Demo: Fiddle