Sự kiện tùy chỉnh trong jQuery không bị ràng buộc với phần tử DOM?

Question

Tôi rất tò mò nếu có thể tạo sự kiện tùy chỉnh trong jQuery không bị ràng buộc với thành phần DOM.

Tôi rất thích jQuery với YUI nhưng có một điều trong YUI mà tôi thích, đó là tạo sự kiện tùy chỉnh và có thể đăng ký với họ sau này.

Ví dụ, điều này tạo ra một sự kiện được liên kết với một biến, không để một phần tử DOM:

var myevent = new YAHOO.util.CustomEvent("mycustomevent"); 

Tất cả các ví dụ và tài liệu hướng dẫn Tôi đã được đọc cho jQuery đòi hỏi một cái gì đó như:

$('body').bind('mycustomevent', function(){ 
    //do stuff 
}); 

Answer 1

Bạn có thể kích hoạt sự kiện tùy biến toàn cục như thế này trong jQuery:

jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]); 

Những điều này sẽ kích hoạt cho bất kỳ phần tử nào.

Vì jQuery được xây dựng xung quanh các đối tượng DOM, bạn phải liên kết sự kiện của mình với đối tượng DOM. Bạn có lẽ có thể tìm thấy một số cách để ràng buộc các sự kiện mà không có một yếu tố quá (bạn đã làm), nhưng đó không phải là một phương pháp được hỗ trợ.

Như bạn đã viết trong câu trả lời của riêng bạn, bạn có thể liên kết sự kiện của bạn cho một đối tượng DOM toàn cầu nếu bạn không muốn để ràng buộc nó vào một yếu tố trang cá nhân:

$(document).bind('mycustomevent', function (e, arg1, arg2, arg3) { /* ... */ }); 

Answer 2

Đối với độc giả trong tương lai, khá của nó đơn giản để làm điều này. Tôi đã nghiên cứu thêm sau khi đăng câu hỏi của mình. Rất tiếc, không có người bình luận nào khác là chính xác.

Để ràng buộc một sự kiện tùy chỉnh:

$().bind('mycustomevent', function(){ 
    //code here 
}); 

Ngoài ra, bạn có thể xây dựng dữ liệu vào đối tượng sự kiện đó là sau truy cập:

$({mydata:'testdata'}).bind('mycustomevent',function(){ 
    //code here 
}); 

Answer 3

Bạn vẫn có thể tùy ý kích hoạt và phản ứng với các sự kiện bằng cách sử dụng jQuery, ngay cả khi bạn không biết phần tử nào để đính kèm chúng vào. Chỉ cần tạo phần tử "người nhận" trong tài liệu của bạn, mà bạn có thể ràng buộc tất cả các sự kiện tùy chỉnh của mình. Điều này cho phép bạn quản lý logic xử lý sự kiện của mình ở một nơi, cho tất cả các sự kiện không thuộc phần tử cụ thể của bạn.

$(document).ready(function() { 

    $(body).append('<div id="receiver">'); 

    $("#receiver").bind("foo_event", function() { 
    // decide what to do now that foo_event has been triggered. 
    }); 

    $("#some_element").click(function() { 
    $("#receiver").trigger("foo_event"); 
    }); 

}); 

Answer 4

Ràng buộc với các thành phần không có phần đã được xóa trong jQuery 1.4.4.

Answer 5

jQuery Callbacks cung cấp cách đơn giản để triển khai hệ thống phụ-pub độc lập với DOM.

Gần cuối trang được liên kết là mã mẫu cho biết cách thực hiện điều đó.

Answer 6

[EDIT]

Dưới đây là một tầng lớp lao động có sử dụng các khái niệm văn bản dưới đây:

https://github.com/stratboy/image-preloader

Nó chỉ là một trình nạp trước hình ảnh tuần tự. Bạn có thể đăng ký một loạt các sự kiện. Hãy xem.

[/ EDIT]

Cũ bài:

Dưới đây là một ví dụ khác barebones với callbacks như đề xuất bởi Himanshu P.

Tôi đang xây dựng một lớp học và tôi đến từ Mootools, nơi mà mọi thứ như Các lớp và các sự kiện tùy chỉnh được triển khai trực tiếp trong các lớp (do đó không ràng buộc với các phần tử DOM) là hoàn toàn tự nhiên. Vì vậy, tôi đã thử một cách giải quyết khác và chia sẻ bên dưới.

var step_slider; 

    //sandbox 
    ;(function($) { 

//constructor 
var StepSlider = function(slider_mask_selector,options) { 

    //this.onStep = $.Event('step'); 
    this.options = null; 
    this.onstep = $.Callbacks(); 

    this.init(); 
}//end constructor 

StepSlider.prototype = { 

    init:function(){ 
     this.set_events(); 
    },//end init 

    set_events:function(){ 

     if(this.options){ 
      if(this.options.onstep){ 
       this.subscribe('step',options.onstep); 
      } 
     } 

    },//set_events 

    subscribe:function(event,action){ 
     this['on'+event].add(action); 
    }, 

    fire_onstep:function(){ 
     this.onstep.fire({ data1:'ok' }); 
    } 

}//end prototype/class 

//-------------------- 

$(document).ready(function() { 

    step_slider = new StepSlider('selector'); 

    //for example, say that you have a div#next-button, you can then do this: 
    $('#next-button').click(function(){ 
     step_slider.fire_onstep(); 
    }); 

});//end domready 


})(jQuery); 

Answer 7

Theo a comment by John Resig, sự kiện ràng buộc các đối tượng tùy chỉnh thông qua jQuery được hỗ trợ:

Không có lý do cụ thể tại sao nó không phải tài liệu (trừ rằng nó khá phi truyền thống đối với hầu hết người dùng) - nhưng có, chúng tôi hỗ trợ nó và có các bài kiểm tra đơn vị cho nó.

Vì vậy, công trình này:

var a = {foo: 'bar'}; 
$(a).on('baz', function() {console.log('hello')}); 
$(a).triggerHandler('baz'); 
>>> 'hello' 

Hầu hết người dùng sẽ cần triggerHandler(), không trigger(). Nếu .trigger("eventName") được sử dụng, nó sẽ tìm kiếm một thuộc tính "eventName" trên đối tượng và cố gắng thực hiện nó sau khi bất kỳ trình xử lý jQuery đính kèm nào được thực hiện (Source).

EDIT (2017/02/28):

Sau khi sử dụng mô hình này trong khoảng 2 năm trong một codebase lớn, tôi có thể chứng thực rằng đây là một ý tưởng tồi. Các sự kiện tùy chỉnh này dẫn đến luồng dữ liệu không thể hiểu được. Ưu tiên gọi lại các cuộc gọi lại.