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

时间:2014-02-23 13:00:08

标签: javascript jquery

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

  1. 当textarea内部的文字发生变化时(keyup
  2. document是陈词滥调(click)。
  3. 我知道抓住回调函数并将其置于函数声明中,然后在两种情况下使用该函数都可以完成这项任务,但是有些东西不需要我将回调函数放在普通函数中保持原样?

    这是我目前的代码:

    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上运行此代码?

    谢谢。

1 个答案:

答案 0 :(得分:2)

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

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