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

Question

我正在寻找与每个人一直在寻找的相反的东西。我有一个匿名 jQuery 函数，我想保持这种方式，但我想在不同的事件(恰好是两个事件)上将多个事件处理程序附加到它。

1. 当文本区域内的文本发生更改时 (keyup)
2. 当文档被点击时(点击)。

我知道获取回调函数并将其放入函数声明中，然后在两种情况下使用该函数就可以完成这项工作，但是是否有一些东西不需要我将回调函数放入普通函数中，只需保持原样吗？

这是我目前拥有的代码:

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

如何使此代码也在文档 click 上运行？

谢谢。

Answer 1

正如您自己在问题中所说，答案是创建回调函数的外部命名引用并将其用作回调。

喜欢

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

但是既然您要求使用不同的样式来看看，它本质上与上面的样式相同

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

演示:Fiddle