Setting up the HTML

First we need some HTML to work with.

```

emphasis code strong anchor

Click an element above to see its event data.

```

Creating the Event Handler

Next we'll create a handler to run when the event is fired. In our handler we'll update the `#event-result` node with some data available through the event.

``` var onClick = function(e) { var type = e.type, currentTarget = e.currentTarget, // #container target = e.target; // #container or a descendant Y.one('#event-result').setHTML('

Event Type:: ' + e.type + '
Target Tag Name:: ' + target.get('tagName') + '
Color of Target's Font:: ' + '
CurrentTarget Tag Name & Id:: ' + currentTarget.get('tagName') + '#' + currentTarget.get('id') + '

'); }; ```

Listening for Events

We can assign our handler to the container of the objects by using the `Y.one`. Clicking on any object in the container will bubble the event to the container. We're using the 'on' method to subscribe to the click and dblclick events.

``` Y.one('#container').on('click', onClick); Y.one('#container').on('dblclick', onClick); ```

Complete Example Source

``` {{>events-source}} ```