When the user interacts with the web form, such as when clicking on a button or filling in a text field, an event fires; any element on the page can have events. The DOM contains hooks for these events and the developer can write code (an event handler) that the browser must execute when the event fires. How do we add an event handler to an element (which is also called registering an event handler)?. The general format is:

  element.onEvent.listen( event_handler )

(The spaces are not needed, but can be used to make the code more readable). Examples of events are Click, Change, Focus, Drag, MouseDown, Load, KeyUp, and so on. View this as the browser listening to events on elements and, when they occur, executing the indicated event handler. The argument that is passed to the listen() method is a callback function and has to be of the type EventListener; it has the signature: void EventListener(Event e)

The event handler gets passed an Event parameter, succinctly called e or ev, that contains more specific info on the event, such as which mouse button should be pressed in case of a mouse event, on which object the event took place using e.target, and so on. If an event is not handled on the target object itself, you can still write the event handler in its parent, or its parent's parent, and so on up the DOM tree, where it will also get executed; in such a situation, the target property can be useful in determining the original event object. In todo_v2.dart, we examine the various event-coding styles. Using the general format, the Click event on btns2[2] can be handled using the following code:

  btns2[2].onClick.listen( changeBtnsBackColor );    

where changeBtnsBackColor is either the event handler or callback function. This function is written as:

  changeBtnsBackColor(Event e) => btns.forEach( (b) =>     b.classes.add('btns_backgr'));

Another, shorter way to write this (such as in line (7)) is:

  btns2[2].onClick.listen( (e) => changeBtnsBackColor() );
  changeBtnsBackColor() => btns.forEach( (b) =>        	b.classes.add('btns_backgr'));

When a Click event occurs on btns2[2], the handler changeBtnsBackColor is called.

In case the event handler needs more code lines, use the brace syntax as follows:

	changeBtnsBackColor(Event e) {
             btns.forEach( (b) => b.classes.add('btns_backgr'));
    // possibly other code
  }

Familiarize yourself with these different ways of writing event handlers.

Of course, when the handler needs only one line of code, there is no need for a separate method, as in the following code:

newTask.onClick.listen( (e) => newTask.remove() );

For clarity, we use the function expression syntax => whenever possible, but you can inline the event handler and use the brace syntax along with an anonymous function, thus avoiding a separate method. So instead of executing the following code:

  task.onChange.listen( (e) => addItem() );

we could have executed:

  task.onChange.listen( (e) {
     var newTask = new LIElement();
     newTask.text = task.value;
     newTask.onClick.listen( (e) => newTask.remove());
     task.value = '';
     list.children.add(newTask);
   } );

JavaScript developers will find the preceding code very familiar, but it is also used frequently in Dart code, so make yourself acquainted with the code pattern ( (e) {...} );. The following is an example of how you can respond to key events (in this case, on the window object) using the keyCode and ctrlKey properties of the event e:

   window.onKeyPress.listen( (e) {
     if (e.keyCode == KeyCode.ENTER) {
       window.alert("You pressed ENTER");
     }
     if (e.ctrlKey && e.keyCode == CTRL_ENTER) {
       window.alert("You pressed CTRL + ENTER");
     }
   });

In this code, the constant const int CTRL_ENTER = 10; is used.

(The list of keyCodes can be found at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes).