Quan sát sự kiện JS, khi bạn chỉ biết PART của tên sự kiện?

Question

tôi đã thừa hưởng một số JS (mà tôi không thể thay đổi) mà bắn một loạt các sự kiện:

jQuery(document).trigger('section:' + section); 
// where "section" changes dynamically 

Và tôi muốn quan sát cho TẤT CẢ các sự kiện, và phân tích ra các giá trị cho section, và làm một cái gì đó khác nhau tùy thuộc vào nội dung của nó.

Nếu nó không thay đổi tôi có thể làm điều này:

jQuery(document).on('section:top', doStuff); 

Nhưng làm thế nào để tôi quan sát một sự kiện nếu tôi chỉ biết phần đầu của tên sự kiện?

Answer 1

Đây là những gì tôi đã kết thúc làm.

Đó là một sự kết hợp của giải pháp Juan Mendes, và sử dụng một method from the prototype library

Nguyên, đã có một chức năng mà chạy mã này:

myObject.adjustSection(section) { 
    jQuery(document).trigger('section:' + section); 
} 
// I couldn't edit this function 

Vì vậy, tôi mở rộng chức năng với phương pháp nguyên mẫu của wrap, vì tôi dự án được sử dụng nguyên mẫu cũng như jQuery.

// My custom function wrapper 
// extend adjustSection to include new event trigger 
myObject.prototype.adjustSection = myObject.prototype.adjustSection.wrap(
    function(parentFunction, section) { 
     // call original function 
     parentFunction(section); 
     // fire event w/section info 
     jQuery(document).trigger({ 
      type: 'adjustSection', 
      section: section 
     }); 
    } 
); 

Sau đó, nó chạy bản gốc, nhưng cũng kích hoạt sự kiện tùy chỉnh của tôi bao gồm thông tin phần.

Bây giờ, tôi có thể làm điều này để quan sát sự kiện đó và nhận được các loại phần:

jQuery(document).on('adjustSection', function(event) { 
    event.section; // contains the section I need 
}); 

Tất nhiên, điều này có nghĩa là tôi phải sử dụng cả hai nguyên mẫu và jquery trong phạm vi tương tự, mà không phải là điều tốt nhất trên thế giới. Nhưng nó hoạt động.

Answer 2

Rất tiếc, bạn không thể nghe tất cả các sự kiện theo phong cách $().on('section:*'). Nếu bạn có thể thay đổi mã, tôi sẽ làm như sau:

jQuery(document).trigger({ 
    type: 'section', 
    section: section 
}); 

Sau đó, bạn nghe cho nó và không cần phải phân tích bất cứ điều gì ra

jQuery(document).on('section', function(e){ 
    if (e.section === 'top') { 
     // Something happened to the top section 
    } 
}); 

Nếu bạn muốn giảm thiểu thay đổi mã của bạn, để lại sự kiện cũ trong đó, theo cách đó mã hiện tại sẽ không bị ảnh hưởng.

Cách tiếp cận khác sẽ là sử dụng không gian tên sự kiện.

jQuery(document).trigger('section.' + section); 

jQuery(document).on('section', function(e){ 
    if (e.namespace === 'top') { 
     // Something happened to the top section 
    } 
}); 

I, tuy nhiên, thích cách tiếp cận đầu tiên vì không gian tên sự kiện thường được sử dụng cho một mục đích khác nhau: để có thể loại bỏ các sự kiện mà không bị buộc phải giữ một tham chiếu đến xử lý riêng của mình. Xem http://css-tricks.com/namespaced-events-jquery/ và http://ejohn.org/apps/workshop/adv-talk/#13. Tôi thích sử dụng các kiểu mà các nhà phát triển khác đang sử dụng, nếu họ thực hiện công việc.

Answer 3

Tôi thực sự không chắc chắn về trường hợp sử dụng của bạn nhưng bạn có thể ghi đè lên $.fn.trigger phương pháp:

(function ($) { 
 
    var oldTrigger = $.fn.trigger; 
 
    $.fn.trigger = function() { 
 
     if (arguments[0].match(/^section:/)) { 
 
      doStuff(arguments[0].split(':')[1]); 
 
     } 
 
     return oldTrigger.apply(this, arguments); 
 
    }; 
 
})(jQuery); 
 
var section = "top"; 
 
jQuery(document).trigger('section:' + section); 
 

 
function doStuff(section) { 
 
    alert(section); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>