2013-04-23 9 views
6

Hãy tưởng tượng, bạn muốn nghe tất cả các lần nhấp được thực hiện cho bất kỳ phần tử cố định nào trên trang. Các neo trên trang có thể được thêm/xóa tự động trong suốt thời gian tồn tại của trang và bạn muốn đăng ký tất cả các sự kiện nhấp chuột, ngay cả khi mới được thêm vào.Có một phái đoàn sự kiện trong SDK phi tiêu không?

Có cách nào để đính kèm sự kiện được ủy quyền (như trong jQuery) vào Dart bằng các thư viện chuẩn của nó không?

Trong jQuery, bạn có thể đạt được điều này với element.on('click', '.selector', handler);.

+0

Đáng buồn là không, tôi tôi cũng tạo một phương pháp trợ giúp trong ứng dụng của chúng tôi, nhưng giải pháp thực sự là có hoặc có điều này trong phi tiêu: html hoặc một gói Pub như bạn đã làm. –

Trả lời

7

Bây giờ bạn có thể làm điều đó với ElementStream.matches như thế này:

document.body.onClick.matches('.selector').listen((Event event) { 
    print('Super cool!'); 

    // The currently registered target for the event 
    // document.body 
    event.currentTarget; 

    // The element whose CSS selector matched 
    // .selector 
    event.matchingTarget; 

    // The target to which the event was originally dispatched 
    // the real element clicked under .selector 
    event.target; 
}); 
+0

Điều đó thật thú vị. Chính xác nó hoạt động như thế nào? Điều gì sẽ có trong 'event.target'? Hãy tưởng tượng, bên trong 'div class = 'selector'', có một số' Nhấp vào tôi! 'phần tử. Bây giờ có ba yếu tố khác nhau mà chúng ta có thể quan tâm: i) phần tử 'body' mà chúng ta đang nghe (dễ lấy), ii) phần tử' .selector' mà chúng ta khớp, iii) phần tử '', thực sự đã nhận được nhấp chuột. Điều nào trong số này sẽ nằm trong 'event.target'? Có thể có được bằng cách nào đó những người khác? –

+0

Tôi chỉ thử một người giúp việc nhanh: 'e.currentTarget' trỏ đến các điểm' document.body' và 'e.target' tới' Nhấp vào tôi! '. Tôi không nghĩ rằng bạn có thể truy xuất phần tử khớp với '.selector' vì có thể có một vài phương thức' .atch'. JQuery xử lý điều này như thế nào? –

+0

Trong jQuery, đối tượng 'event' được truyền cho trình xử lý của sự kiện được ủy quyền có ba thuộc tính:' event.target' - ' Nhấp vào tôi! ',' event.currentTarget' - '.selector' và' event.delegatedTarget' - 'document.body', bạn có thể kiểm tra ví dụ tại http://jsfiddle.net/d2fvW/ Nếu không thể trong Dart để lấy tương đương với jQuery 'event.currentTarget', nó làm cho chức năng ủy nhiệm khá không thể sử dụng :-( –

2

Vì tôi không tìm thấy giải pháp khả thi, tôi đã tạo gói cho phép ủy quyền.

Bạn có thể tìm thấy nó ở http://pub.dartlang.org/packages/delegate

Mã rất đơn giản:

delegate(parent, condition, handler) { 
    return (event) { 
    var element = event.target; 
    while (element != parent && element != null) { 
     if (condition(element)) { 
     handler(event, element); 
     } 
     element = element.parent; 
    } 
    }; 
} 

delegateOn(parent, String eventType, condition, handler) { 
    parent.on[eventType].listen(delegate(parent, condition, handler)); 
}