Optimizing DOM tree manipulations
We've already seen some basic manipulation with HTML elements in Chapter 1, Getting Started with Dart, and we'll make a few notes about it here.
The Dart library wraps standard JavaScript element classes and methods with more unified names. Classes that represent HTML elements don't start with the HTML
prefix, so for example, HTMLDivElement
is called DivElement
in Dart. Take a look at this JavaScript snippet:
elm.addEventListener('client', function() { /* ... */ });
Instead of binding event listeners with the preceding code, Dart uses the so-called Stream API, where you don't bind listeners directly to the element you subscribe but to a Stream
object instead, which emits all events. Each HTML element has all the default event emitters, such as onClick
or onKeyPress
:
elm.onClick.listen((e) { /* ... */ });
The listen()
method returns a StreamSubscription
object that can be used to unsubscribe the listener.
Streams have many methods...