2013-04-23 2 views
6

Представьте, что вы хотите прослушать все клики, сделанные для любого элемента привязки на странице. Якоря на странице можно динамически добавлять/удалять в течение срока действия страницы, и вы хотите зарегистрировать все события кликов, даже при добавлении новых.Есть ли делегирование событий в SDK SDK?

Есть ли способ связать делегированное событие (например, в jQuery) в Дарте, используя его стандартные библиотеки?

В jQuery вы можете достичь этого с помощью element.on('click', '.selector', handler);.

+0

К сожалению, нет, я также сделал вспомогательный метод в нашем приложении, но реальное решение - либо иметь это в дроти: html или пакет Pub, как вы. –

ответ

7

Теперь вы можете сделать это с ElementStream.matches, как это:

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

Это интересно. Как именно это работает? Что будет в 'event.target'? Представьте себе, что внутри 'div class = 'selector'' есть некоторая' Click me! 'элемент. Теперь мы можем заинтересовать три различных элемента: i) элемент 'body', который мы слушаем (это легко получить), ii) элемент' .selector', который мы сопоставляем, iii) '' элемент, который действительно получил клик. Какие из них будут в «event.target»? Можно ли как-то получить других? –

+0

Я просто горничная быстрая проверка: 'e.currentTarget' указывает на' document.body' и 'e.target' указывает на' Click me! '. Я не думаю, что вы можете получить элемент, соответствующий '.selector', потому что может быть несколько методов' .matches'. Как jQuery справляется с этим? –

+0

В jQuery объект 'event', переданный обработчику делегированного события, имеет три свойства:' event.target' - ' Click me! ',' event.currentTarget' - '.selector' и' event.delegatedTarget' - 'document.body', вы можете посмотреть пример по адресу http://jsfiddle.net/d2fvW/. Если в Dart невозможно получить эквивалент jQuery 'event.currentTarget', он делает функциональность делегирования довольно непригодной :-( –

2

Поскольку я не нашел жизнеспособного решения, я создал пакет, который позволяет делегировать.

Вы можете найти его на http://pub.dartlang.org/packages/delegate

кодекса проста:

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)); 
} 
Смежные вопросы